"use client";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";

interface ProductCardProps {
  id: string;
  title: string;
  description: string;
  image: string;
  category: string;
}

export const ProductCard = ({
  id,
  title,
  description,
  image,
  category,
}: ProductCardProps) => {
  return (
    <Link href={`/products/subcategory/${category}/${id}`}>
      <motion.div
        whileHover={{ y: -5 }}
        className="bg-white border border-gray-200 rounded-xl overflow-hidden hover:border-red-600 transition-colors shadow-sm hover:shadow-md h-full"
      >
        <div className="relative h-48 bg-gray-100">
          <Image
            src={image || "/placeholder.svg"}
            alt={title}
            fill
            className="object-cover"
          />
        </div>
        <div className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
          <p className="text-gray-600 text-sm line-clamp-2">{description}</p>
          <div className="mt-4">
            <span className="inline-block bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full">
              View Details
            </span>
          </div>
        </div>
      </motion.div>
    </Link>
  );
};