// components/ProductCard.tsx
"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { ShoppingBag } from "lucide-react";
import { useCartStore } from "@/store/useCartStore";

interface ProductCardProps {
  id: string;
  title: string;
  slug: string;
  category: string;
  fileType: string;
  price: number;
  discountPrice?: number | null;
  thumbnailUrl: string;
  fileSize: string;
}

export default function ProductCard(props: ProductCardProps) {
  const { addItem } = useCartStore();

  return (
    <motion.div
      whileHover={{ y: -6 }}
      transition={{ duration: 0.2 }}
      className="group relative flex flex-col rounded-2xl bg-zinc-900/60 border border-zinc-800 overflow-hidden hover:border-zinc-700 hover:shadow-xl transition-all"
    >
      <Link href={`/products/${props.slug}`} className="relative aspect-[4/3] w-full overflow-hidden bg-zinc-950 block">
        <Image
          src={props.thumbnailUrl}
          alt={props.title}
          fill
          sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
          className="object-cover group-hover:scale-105 transition-transform duration-300"
        />
        <div className="absolute top-3 left-3 flex gap-1.5">
          <span className="rounded-md bg-black/70 px-2 py-1 text-[11px] font-bold tracking-wide text-indigo-400 backdrop-blur-md">
            {props.fileType}
          </span>
          <span className="rounded-md bg-black/70 px-2 py-1 text-[11px] font-medium text-zinc-300 backdrop-blur-md">
            {props.fileSize}
          </span>
        </div>
      </Link>

      <div className="flex flex-1 flex-col justify-between p-4">
        <div>
          <span className="text-xs font-medium text-indigo-400">{props.category}</span>
          <Link href={`/products/${props.slug}`} className="block">
            <h3 className="mt-1 font-semibold text-white text-sm line-clamp-1 group-hover:text-indigo-300 transition">
              {props.title}
            </h3>
          </Link>
        </div>

        <div className="mt-4 flex items-center justify-between">
          <div>
            <span className="text-base font-bold text-white">₹{props.price}</span>
            {props.discountPrice && (
              <span className="ml-2 text-xs text-zinc-500 line-through">₹{props.discountPrice}</span>
            )}
          </div>
          <button
            onClick={() =>
              addItem({
                id: props.id,
                title: props.title,
                price: props.price,
                fileType: props.fileType,
                thumbnailUrl: props.thumbnailUrl,
              })
            }
            className="flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-500 transition shadow-md shadow-indigo-600/20 active:scale-95"
          >
            <ShoppingBag className="h-3.5 w-3.5" /> Add
          </button>
        </div>
      </div>
    </motion.div>
  );
}