'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/button';
import { Reveal } from '@/components/ui/reveal';
import { useCartStore } from '@/lib/cart-store';
import { formatPrice } from '@/lib/format';
import type { Locale } from '@/i18n/config';

export interface ProductCardData {
  id: string;
  slug: string;
  sku: string;
  name: string;
  shortDescription: string;
  image?: string;
  price?: number | null;
  currency: string;
  available: boolean;
  categorySlug?: string;
  categoryName?: string;
}

export function ProductCard({ product, locale, delay = 0 }: { product: ProductCardData; locale: Locale; delay?: number }) {
  const t = useTranslations('product');
  const addItem = useCartStore((s) => s.addItem);

  return (
    <Reveal variant="up" delay={delay} className="h-full">
      <div className="group flex h-full flex-col overflow-hidden rounded-2xl border border-graphite-800/10 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-copper-600/10">
        <Link href={`/${locale}/products/${product.slug}`} className="relative aspect-[4/3] overflow-hidden bg-graphite-900/5">
          {product.image && (
            <Image
              src={product.image}
              alt={product.name}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-110"
            />
          )}
          {!product.available && (
            <span className="absolute left-3 top-3 rounded-full bg-graphite-950/80 px-2.5 py-1 text-xs text-paper-50">
              {t('outOfStock')}
            </span>
          )}
        </Link>
        <div className="flex flex-1 flex-col gap-2 p-4">
          <Link href={`/${locale}/products/${product.slug}`} className="font-display text-base font-semibold transition-colors hover:text-copper-600">
            {product.name}
          </Link>
          <p className="line-clamp-2 flex-1 text-sm text-graphite-900/60">{product.shortDescription}</p>
          <div className="flex items-center justify-between pt-2">
            <span className="font-semibold">
              {product.price != null ? formatPrice(product.price, product.currency, locale) : t('priceOnRequest')}
            </span>
            <Button
              variant="secondary"
              className="!px-4 !py-2 text-xs"
              disabled={!product.available}
              onClick={() =>
                addItem({
                  productId: product.id,
                  slug: product.slug,
                  sku: product.sku,
                  name: product.name,
                  image: product.image
                })
              }
            >
              {t('addToCart')}
            </Button>
          </div>
        </div>
      </div>
    </Reveal>
  );
}