import Link from "next/link";

type ProductCardProps = {
  id: number;
  image: string;
  category: string;
  title: string;
  price: number;
  oldPrice?: number;
  sale?: boolean;
};

export default function ProductCard({
  id,
  image,
  category,
  title,
  price,
  oldPrice,
  sale = false,
}: ProductCardProps) {
  return (
    <Link
      href={`/product/${id}`}
      className="group relative block rounded-xl border border-[#EEEEEE] bg-white p-4 transition-all hover:shadow-md"
    >
      {sale && (
        <span className="absolute right-3 top-3 z-10 rounded-md bg-[#FF6B6B] px-2 py-1 text-xs text-white">
          SALE
        </span>
      )}

      <div className="flex h-52 items-center justify-center overflow-hidden">
        <img
          src={image}
          alt={title}
          className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="mt-5 border-t border-[#EEEEEE] pt-5">
        <p className="text-sm text-gray-400">
          {category}
        </p>

        <h3 className="mt-2 line-clamp-2 text-[15px] font-normal leading-[22px] text-[#4B5966]">
          {title}
        </h3>

        <div className="mt-4 flex items-center gap-3">
          <span className="new-price mr-2 text-[15px] font-bold text-[#4b5966]">
            AED {price.toFixed(2)}
          </span>

          {sale && oldPrice !== undefined && (
            <span className="old-price text-[15px] text-[#777] line-through">
              AED {oldPrice.toFixed(2)}
            </span>
          )}
        </div>
      </div>
    </Link>
  );
}