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';

export function ProductCard({ product }: { product: Product }) {
  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">Rs. {product.price.toLocaleString()}</span>
          <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"
          />
        </div>
      </div>
    </div>
  );
}