---
import Icon from './Icon.astro';

export interface Props {
  roadmapId: string;
  tnsBannerLink?: string;
}

const { roadmapId, tnsBannerLink = '' } = Astro.props;

const hasTNSBanner = !!tnsBannerLink;
const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
---

<div
  class:list={[
    'mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0',
    {
      'sm:-mb-[82px]': hasTNSBanner,
      'sm:-mb-[65px]': !hasTNSBanner,
    },
  ]}
>
  {
    hasTNSBanner && (
      <div class='px-2 py-1.5 border-b bg-gray-100 hidden sm:block'>
        <p class='text-sm'>
          Get the latest {roadmapTitle} news from our sister site{' '}
          <a
            href={tnsBannerLink}
            target='_blank'
            class='font-semibold underline'
            ga-category='PartnerClick'
            ga-action='TNS Referral'
            ga-label='TNS Referral - Roadmap'
          >
            TheNewStack.io
          </a>
        </p>
      </div>
    )
  }

  <!-- Desktop: Roadmap Resources - Alert -->
  <div
    class:list={[
      'hidden sm:flex justify-between px-2 bg-white items-center',
      {
        'rounded-bl-md rounded-br-md': hasTNSBanner,
        'rounded-md': !hasTNSBanner,
      },
    ]}
  >
    <p class='text-sm'>
      <span class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'>New</span>
      Resources are here, try clicking nodes
    </p>

    <a
      href={`/${roadmapId}/topics`}
      class='inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1'
    >
      <Icon icon='search' />
      <span class='ml-2'>Search Topics</span>
    </a>
  </div>

  <!-- Mobile - Roadmap resources alert -->
  <p class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'>
    Click roadmap items for resources or visit{' '}
    <a href={`/${roadmapId}/topics`} class='text-blue-700 underline'> resources list</a>.
  </p>
</div>