---
import Icon from './AstroIcon.astro';
import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
import BestPracticeHint from './BestPracticeHint.astro';
import ProgressHelpPopup from './ProgressHelpPopup.astro';

export interface Props {
  title: string;
  description: string;
  bestPracticeId: string;
  isUpcoming?: boolean;
}

const { title, description, bestPracticeId, isUpcoming = false } = Astro.props;
const isBestPracticeReady = !isUpcoming;
---

<LoginPopup />
<ProgressHelpPopup />

<div class='border-b'>
  <div class='container relative py-5 sm:py-12'>
    <div class='mb-3 mt-0 sm:mb-6'>
      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
        {title}
      </h1>
      <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
    </div>

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

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

        {
          isBestPracticeReady && (
            <a
              data-auth-required
              class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
              aria-label='Download Roadmap'
              target="_blank"
              href={`/pdfs/best-practices/${bestPracticeId}.pdf`}
            >
              <Icon icon='download' />
              <span class='ml-2 hidden sm:inline'>Download</span>
            </a>
          )
        }

        <button
          data-guest-required
          data-popup='login-popup'
          class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
          aria-label='Subscribe for Updates'
        >
          <Icon icon='email' />
          <span class='ml-2'>Subscribe</span>
        </button>
      </div>

      {
        isBestPracticeReady && (
          <a
            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
            target='_blank'
            class='inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
            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>

    <BestPracticeHint bestPracticeId={bestPracticeId} />
  </div>
</div>