import CategoryIcon from './CategoryIcon';
import { formatPrice } from '@/lib/format';
import type { Category, Product } from '@/lib/types';

export default function ProductCard({
  product,
  category,
}: {
  product: Product;
  category?: Category;
}) {
  const price = formatPrice(product.price);

  return (
    <article className="group card flex flex-col overflow-hidden transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lift">
      <div className="relative flex h-32 items-center justify-center overflow-hidden bg-gradient-to-br from-cream-200 to-cream-300">
        {product.image_url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={product.image_url}
            alt={product.name}
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <>
            <div
              className="absolute inset-0 opacity-[0.07]"
              style={{
                backgroundImage:
                  'repeating-linear-gradient(45deg, #5A4032 0 1px, transparent 1px 9px)',
              }}
              aria-hidden
            />
            <CategoryIcon
              slug={category?.slug ?? ''}
              className="h-12 w-12 text-gold-600/70 transition-transform duration-500 group-hover:scale-110"
            />
          </>
        )}
        {product.is_featured && (
          <span className="absolute left-3 top-3 rounded-full bg-cocoa-900/85 px-2.5 py-1 text-[0.62rem] font-medium uppercase tracking-wider text-cream-100">
            Öne çıkan
          </span>
        )}
      </div>

      <div className="flex flex-1 flex-col p-5">
        {category && <p className="eyebrow mb-2">{category.name}</p>}
        <h3 className="font-display text-xl leading-snug">{product.name}</h3>
        {product.description && (
          <p className="mt-2 flex-1 text-sm leading-relaxed text-cocoa-600/85">
            {product.description}
          </p>
        )}
        <div className="mt-4 flex items-center justify-between border-t border-cocoa-800/8 pt-4">
          <span className="text-xs uppercase tracking-wider text-cocoa-400">
            {product.unit ?? '—'}
          </span>
          <span className="font-display text-lg text-cocoa-900">
            {price ?? <span className="text-sm text-gold-600">Fiyat için arayın</span>}
          </span>
        </div>
      </div>
    </article>
  );
}