import { useTranslations } from '@/i18n/utils'
import type { CollectionEntry } from 'astro:content'
import rightArrowIconSrc from '@/assets/icons/RightArrowIcon.svg'

export type CoachCardProps = CollectionEntry<'coaches'> & { lang?: string }

export const CoachCard: React.FC<CoachCardProps> = ({ data, lang, slug }) => {
  const { name, description, cover, coverAlt } = data
  const t = useTranslations(lang)
  const coachPageLink = `/coaches/${slug}`

  return (
    <div className="aspect-3/4 relative h-full max-w-[262px] overflow-hidden rounded-3xl text-white md:max-w-[320px] lg:max-w-[400px]">
      <img
        {...cover}
        loading="lazy"
        decoding="async"
        className="h-full w-full object-cover object-top mix-blend-luminosity"
        alt={coverAlt}
      />
      <a
        href={coachPageLink}
        data-astro-prefetch
        className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/80 via-transparent p-2 lg:p-3"
      >
        <div className="flex items-center justify-between gap-4">
          <h3 className="text-xl font-bold uppercase text-text-light">{name}</h3>
          <img {...rightArrowIconSrc} width={50} height={50} />
        </div>
      </a>
    </div>
  )
}