'use client'

import { Button } from '@/components/ui/button'
import ImageLoader from '@/lib/utils/ImageLoader'
import { useI18n } from '@/locales/client'
import { Media } from '@/payload-types'
import { ChevronRight } from 'lucide-react'
import Link from 'next/link'

export const ReviewsCard = ({
  image,
  title,
  text,
  onClick,
  type = 'link',
}: {
  image: Media
  title: string
  text: string
  onClick?: () => void
  type?: 'button' | 'link'
  }) => {
  const t = useI18n()
  return (
    <div className="group relative h-[360px] overflow-hidden rounded-2xl shadow hover:shadow-lg transition-all duration-400">
      <div className="relative w-full h-full overflow-hidden">
        <ImageLoader
          media={image}
          alt={image.alt || ''}
          className="object-cover w-full h-full"
        />
      </div>

      <div className="absolute inset-0 bg-black/40 group-hover:bg-black/60 transition-all duration-400" />

      <div className="absolute bottom-0 left-0 w-full p-4 text-left text-white transition-all duration-400 translate-y-[-70px] xl:translate-y-0 xl:group-hover:translate-y-[-70px]">
        <h3 className="text-subheadline-medium font-bold">{title}</h3>
        <p className="line-clamp-4 mt-2 text-b3-regular text-neutral-300 
         xl:max-h-0 xl:group-hover:max-h-[90px] overflow-hidden  xl:opacity-0 group-hover:opacity-100 transition-opacity duration-400">
          {text}
        </p>
      </div>

      <div className="absolute bottom-4 left-4 transition-all duration-400 translate-y-0 xl:translate-y-10 xl:group-hover:translate-y-0  xl:opacity-0 xl:group-hover:opacity-100">
        {type === 'link' && (
          <Button asChild RightIcon={<ChevronRight />} variant="primary">
            <Link href="/reviews">{t('showMore')}</Link>
          </Button>
        )}
        {type === 'button' && (
          <Button onClick={onClick} RightIcon={<ChevronRight />} variant="primary">
            {t('showMore')}
          </Button>
        )}
      </div>
    </div>
  )
}
