---
export interface FeaturedItemType {
  isUpcoming?: boolean;
  isNew?: boolean;
  url: string;
  text: string;
}

export interface Props extends FeaturedItemType {}

const { isUpcoming = false, isNew = false, text, url } = Astro.props;
---

<a
  class:list={[
    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100 overflow-hidden',
    {
      'opacity-50': isUpcoming,
    },
  ]}
  href={url}
>
  <span class='text-slate-400 relative z-20'>
    {text}
  </span>

  {
    isNew && (
      <span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center'>
        <span class='flex h-2 w-2 mr-1.5'>
          <span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75' />
          <span class='relative inline-flex rounded-full h-2 w-2 bg-purple-500' />
        </span>
        New
      </span>
    )
  }

  {
    isUpcoming && (
      <span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center'>
        <span class='flex h-2 w-2 mr-1.5'>
          <span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75' />
          <span class='relative inline-flex rounded-full h-2 w-2 bg-slate-600' />
        </span>
        Upcoming
      </span>
    )
  }
</a>