"use client";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Badge } from "@/components/badge";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";

export interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  image: string;
  isNew?: boolean;
  isSale?: boolean;
}

export function ProductCard({ product }: { product: Product }) {
  return (
    <Card className="group overflow-hidden border-none shadow-sm hover:shadow-md transition-all duration-300">
      <Link href={`/shop/${product.id}`}>
        <div className="relative aspect-[4/5] overflow-hidden bg-neutral-100">
          <Image
            src={product.image}
            alt={product.name}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-110"
          />
          <div className="absolute top-4 left-4 flex flex-col gap-2">
            {product.isNew && <Badge className="bg-black text-white">New Arrival</Badge>}
            {product.isSale && <Badge variant="outline" className="bg-red-500 text-white border-none">Sale</Badge>}
          </div>
        </div>
      </Link>
      <CardContent className="pt-4 px-2">
        <p className="text-xs text-neutral-500 uppercase tracking-wider mb-1">{product.category}</p>
        <h3 className="font-semibold text-neutral-900 group-hover:text-primary transition-colors">
          {product.name}
        </h3>
        <p className="mt-1 font-bold text-neutral-900">${product.price}</p>
      </CardContent>
      <CardFooter className="px-2 pb-4 pt-0">
        <Button variant="secondary" className="w-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          Add to Cart
        </Button>
      </CardFooter>
    </Card>
  );
}