"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Product } from "@/lib/data";
import { Star, ShoppingCart } from "lucide-react";
import Link from "next/link";
import { useCart } from "@/lib/use-cart";

export function ProductCard({ product }: { product: Product }) {
  const { addToCart } = useCart();

  return (
    <Card className="group overflow-hidden border-none shadow-sm hover:shadow-md transition-all duration-300 rounded-2xl">
      <Link href={`/products/${product.id}`}>
        <div className="relative aspect-square overflow-hidden bg-neutral-100">
          <img
            src={product.image}
            alt={product.name}
            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
          />
          {product.isOffer && (
            <div className="absolute top-3 left-3 bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase">
              Offer
            </div>
          )}
        </div>
      </Link>
      <CardContent className="p-4">
        <div className="text-xs text-neutral-500 mb-1">{product.category}</div>
        <Link href={`/products/${product.id}`}>
          <h3 className="font-semibold text-neutral-900 line-clamp-1 group-hover:text-blue-600 transition-colors">
            {product.name}
          </h3>
        </Link>
        <div className="flex items-center gap-1 mt-1 mb-2">
          <div className="flex items-center text-yellow-400">
            <Star className="w-3 h-3 fill-current" />
            <span className="text-xs font-medium text-neutral-700 ml-1">{product.rating}</span>
          </div>
          <span className="text-[10px] text-neutral-400">({product.reviews})</span>
        </div>
        <div className="flex items-center justify-between mt-3">
          <div className="flex flex-col">
            <span className="text-lg font-bold text-neutral-900">₹{product.price}</span>
            {product.originalPrice && (
              <span className="text-xs text-neutral-400 line-through">₹{product.originalPrice}</span>
            )}
          </div>
          <Button 
            size="icon" 
            variant="secondary" 
            className="rounded-full h-9 w-9"
            onClick={() => addToCart(product)}
          >
            <ShoppingCart className="w-4 h-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}