'use client'

import { Button } from '@/components/ui/button'
import ImageLoader from '@/lib/utils/ImageLoader'
import { Media } from '@/payload-types'
import Link from 'next/link'
import { cn } from '@/lib/utils/cn'
import { useCurrentLocale, useScopedI18n } from '@/locales/client'

export const CarCard = ({
  type,
  price,
  image,
  carLabels,
  isActive,
  id,
  href,
}: {
  type: string
  price: number
  image: Media | string
  carLabels: string[]
  isActive?: boolean
  id: string
  href?: string | null
}) => {
  const formattedPrice = price.toFixed(2) // всегда две цифры после точки
  const [priceInt, priceFraction] = formattedPrice.split('.') // делим по точке
  const locale = useCurrentLocale()
  const t = useScopedI18n('carCard')

  return (
    <div
      // onMouseEnter={() => setIsActive(true)}
      // onMouseLeave={() => setIsActive(false)}
      className="group flex flex-col h-full relative bg-base-black gradient-border gradient-border--grey rounded-[12px] overflow-hidden text-grey-100 cursor-pointer"
    >
      <div
        className={cn(
          'absolute right-2 -bottom-[79px] pointer-events-none transition-opacity duration-400 ease-in-out opacity-0',
          'group-hover:opacity-100 lg:group-hover:opacity-100', // desktop hover
          'tablet:active:opacity-100 tablet:focus:opacity-100', // tablet tap/focus
          isActive && 'opacity-100', // mobile control
        )}
      >
        <div className="w-[208px] h-[150px] bg-[#D39E7F] rounded-[50%] blur-[78px] opacity-80" />
      </div>

      <Link href={`/${locale}/catalog/${id}`}>
        <div className="h-[158px] overflow-hidden cursor-pointer">
          {image ? (<ImageLoader
            width={284}
            height={158}
            media={image}
            className="w-full h-full object-contain"
          />) : (
              <div className="w-full h-full bg-grey-200"></div>
          )}

        </div>
      </Link>
      {/* Контент */}
      <div className="p-4 pt-0 flex flex-col flex-1">
        <Link href={`/${locale}/catalog/${id}`}>
          <div className="flex flex-col cursor-pointer">
            <div>
              <p className="b1-semibold pb-2">{type}</p>
              <p className="b3-regular">
                {t('from')} <span className="b1-medium">{priceInt}</span>
                <span className="b3-regular">.{priceFraction} € / {t('day')}</span>
              </p>
            </div>

            <div className="mt-4 flex gap-2 flex-wrap">
              {carLabels.map((label, index) => (
                <div
                  key={index}
                  className="label-medium-regular text-grey-100 px-4 py-[7px] bg-transparent-beige rounded-[50px]"
                >
                  {label}
                </div>
              ))}
            </div>
          </div>
        </Link>

        {/* Кнопка */}
        <div className="mt-auto pt-6">
          <Link href={href ? href : `/${locale}/booking/${id}`}>
            <Button
              className="w-full justify-center z-10 relative"
              sizes="btn-md "
              variant="primary"
            >
              {t('bookNow')}
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}

export default CarCard
