'use client';

import Image from 'next/image';
import Link from 'next/link';
import { ShoppingCart } from 'lucide-react';
import { useCart } from '@/components/CartProvider';
import { formatPrice } from '@/lib/utils';
import type { Product } from '@/types';

interface ProductCardProps {
  product: Product;
}

export function ProductCard({ product }: ProductCardProps) {
  const { addItem } = useCart();
  const image = product.images[0] || '/placeholder.svg';

  const handleAdd = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    addItem({
      productId: product.id,
      name: product.name,
      slug: product.slug,
      price: product.price,
      image,
    });
  };

  return (
    <div className="group flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md">
      <Link href={`/products/${product.slug}`} className="relative aspect-square overflow-hidden bg-muted">
        <Image
          src={image}
          alt={product.name}
          fill
          className="object-cover transition-transform duration-300 group-hover:scale-105"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
        {Number(product.comparePrice) > Number(product.price) && (
          <span className="absolute left-2 top-2 rounded-full bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground">
            Sale
          </span>
        )}
      </Link>

      <div className="flex flex-1 flex-col p-4">
        <Link
          href={`/products?category=${product.category?.slug || ''}`}
          className="text-sm text-muted-foreground hover:text-foreground"
        >
          {product.category?.name || ''}
        </Link>
        <Link href={`/products/${product.slug}`}>
          <h3 className="mt-1 line-clamp-2 font-semibold leading-tight hover:underline">
            {product.name}
          </h3>
        </Link>

        <div className="mt-auto flex items-center justify-between pt-4">
          <div className="flex items-center gap-2">
            <span className="font-bold text-primary">
              {formatPrice(product.price.toString())}
            </span>
            {product.comparePrice && Number(product.comparePrice) > 0 && (
              <span className="text-sm text-muted-foreground line-through">
                {formatPrice(product.comparePrice.toString())}
              </span>
            )}
          </div>

          <button
            onClick={handleAdd}
            disabled={product.stock <= 0}
            className="rounded-full bg-primary p-2 text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
            aria-label="Add to cart"
          >
            <ShoppingCart className="h-4 w-4" />
          </button>
        </div>

        {product.stock <= 0 && (
          <p className="mt-2 text-xs text-destructive">Out of stock</p>
        )}
      </div>
    </div>
  );
}