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

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

export function ProductCard({
  id,
  name,
  price,
  originalPrice,
  image,
  category,
  isNew,
  isSale,
}: ProductCardProps) {
  const discount = originalPrice
    ? Math.round(((originalPrice - price) / originalPrice) * 100)
    : 0;

  return (
    <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300">
      <Link href={`/product/${id}`}>
        <div className="relative h-64 overflow-hidden bg-neutral-100 dark:bg-neutral-800">
          <BlurImage
            src={image}
            alt={name}
            fill
            className="object-cover group-hover:scale-105 transition-transform duration-300"
          />
          <div className="absolute top-3 right-3 flex flex-col gap-2">
            {isNew && <Badge>New</Badge>}
            {isSale && discount > 0 && (
              <Badge variant="destructive">-{discount}%</Badge>
            )}
          </div>
        </div>
      </Link>
      <CardContent className="p-4">
        <p className="text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">
          {category}
        </p>
        <Link href={`/product/${id}`}>
          <h3 className="font-semibold text-lg mb-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300 transition-colors">
            {name}
          </h3>
        </Link>
        <div className="flex items-center gap-2">
          <span className="text-xl font-bold text-neutral-900 dark:text-neutral-100">
            ${price}
          </span>
          {originalPrice && (
            <span className="text-sm text-neutral-500 line-through">
              ${originalPrice}
            </span>
          )}
        </div>
      </CardContent>
      <CardFooter className="p-4 pt-0">
        <Button className="w-full" variant="outline">
          Add to Cart
        </Button>
      </CardFooter>
    </Card>
  );
}