---
import DownloadPopup from './DownloadPopup.astro';
import Icon from './Icon.astro';
import RoadmapHint from './RoadmapHint.astro';
import RoadmapNote from './RoadmapNote.astro';
import SubscribePopup from './SubscribePopup.astro';
import TopicSearch from './TopicSearch/TopicSearch.astro';
import YouTubeAlert from './YouTubeAlert.astro';

export interface Props {
  title: string;
  description: string;
  note?: string;
  tnsBannerLink?: string;
  roadmapId: string;
  isUpcoming?: boolean;
  hasSearch?: boolean;
  hasTopics?: boolean;
}

const { title, description, roadmapId, tnsBannerLink, isUpcoming = false, hasSearch = false, note, hasTopics = false } = Astro.props;

const isRoadmapReady = !isUpcoming;
---

<DownloadPopup />
<SubscribePopup />

<div class='border-b'>
  <div class='py-5 sm:py-12 container relative'>
    <YouTubeAlert />

    <div class='mt-0 mb-3 sm:mb-4 sm:mt-4'>
      <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
        {title}
      </h1>
      <p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
    </div>

    <div class='flex justify-between'>
      <div class='flex gap-1 sm:gap-2'>
        {
          !hasSearch && (
            <>
              <a
                href='/roadmaps'
                class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
                aria-label='Back to All Roadmaps'
              >
                &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
              </a>

              {isRoadmapReady && (
                <button
                  data-popup='download-popup'
                  class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
                  aria-label='Download Roadmap'
                  ga-category='Subscription'
                  ga-action='Clicked Popup Opener'
                  ga-label='Download Roadmap Popup'
                >
                  <Icon icon='download' />
                  <span class='hidden sm:inline ml-2'>Download</span>
                </button>
              )}

              <button
                data-popup='subscribe-popup'
                class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
                aria-label='Subscribe for Updates'
                ga-category='Subscription'
                ga-action='Clicked Popup Opener'
                ga-label='Subscribe Roadmap Popup'
              >
                <Icon icon='email' />
                <span class='ml-2'>Subscribe</span>
              </button>
            </>
          )
        }

        {
          hasSearch && (
            <a
              href={`/${roadmapId}`}
              class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
              aria-label='Back to Visual Roadmap'
            >
              &larr;
              <span class='inline'>&nbsp;Visual Roadmap</span>
            </a>
          )
        }
      </div>

      {
        isRoadmapReady && (
          <a
            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
            target='_blank'
            class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
            aria-label='Suggest Changes'
          >
            <Icon icon='comment' class='h-3 w-3' />
            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
            <span class='ml-2 inline sm:hidden'>Suggest</span>
          </a>
        )
      }
    </div>

    <!-- Desktop: Roadmap Resources - Alert -->
    {hasTopics && <RoadmapHint roadmapId={roadmapId} tnsBannerLink={tnsBannerLink} />}

    {hasSearch && <TopicSearch />}
  </div>
</div>

{note && <RoadmapNote text={note} />}