import Image from 'next/image';
import Link from 'next/link';
import type { Product } from '@/lib/types';
import { productRoute } from '@/lib/routes';
import { AddToCartButton } from '@/components/shop/add-to-cart-button';
import { formatPrice, DEFAULT_CURRENCY } from '@/lib/site-settings';
import type { ApiSiteSettings } from '@/lib/backend-api';

export function ProductCard({ product, currency = DEFAULT_CURRENCY }: { product: Product; currency?: ApiSiteSettings['currency'] }) {
  return (
    <div className="card group flex flex-col overflow-hidden">
      <div className="relative overflow-hidden bg-beige">
        <Link href={productRoute(product.slug)} className="block">
          <Image
            src={product.image}
            alt={product.name}
            width={500}
            height={500}
            className="aspect-square w-full object-cover transition duration-300 group-hover:scale-105"
          />
        </Link>
        <button
          type="button"
          aria-label="Add to wishlist"
          className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-navy-800 shadow hover:text-gold-600"
        >
          <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth={1.8}>
            <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9Z" />
          </svg>
        </button>
      </div>
      <div className="flex flex-1 flex-col p-4">
        <p className="text-xs font-medium uppercase tracking-wide text-gold-600">{product.category}</p>
        <h3 className="mt-1 line-clamp-2 text-sm font-semibold text-navy-800">
          <Link href={productRoute(product.slug)} className="hover:text-gold-600">
            {product.name}
          </Link>
        </h3>
        <p className="mt-1 text-xs text-navy-600">by {product.artisan}</p>
        <div className="mt-auto flex items-center justify-between pt-4">
          <span className="text-base font-bold text-navy-800">{formatPrice(product.price, currency)}</span>
          {product.buyable ? (
            <AddToCartButton
              productId={product.id}
              slug={product.slug}
              name={product.name}
              price={product.price}
              image={product.image}
              className="rounded-md bg-navy-800 px-3 py-1.5 text-xs font-semibold text-white hover:bg-gold-500 hover:text-navy-800"
            />
          ) : (
            <Link
              href={productRoute(product.slug)}
              className="rounded-md border border-navy-800 px-3 py-1.5 text-xs font-semibold text-navy-800 hover:bg-navy-800 hover:text-white"
            >
              Send Inquiry
            </Link>
          )}
        </div>
      </div>
    </div>
  );
}