import Image from "next/image";
import Link from "next/link";
import type { Product } from "@/data/products";

export default function ProductCard({ product }: { product: Product }) {
  return (
    <Link
      href={`/products/${product.slug}`}
      className="group rounded-2xl border border-black/5 bg-white overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
    >
      <div className="relative aspect-square bg-surface">
        <Image
          src={product.image}
          alt={product.title}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-500"
          sizes="(min-width: 1024px) 25vw, (min-width: 640px) 33vw, 50vw"
        />
        <span className="absolute top-3 right-3 rounded-full bg-white/90 backdrop-blur px-3 py-1 text-xs font-semibold text-primary">
          {product.category}
        </span>
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-secondary leading-6 line-clamp-2 min-h-12">
          {product.title}
        </h3>
        <p className="mt-1 text-sm text-foreground line-clamp-2">
          {product.shortDesc}
        </p>
        <div className="mt-3 flex items-center justify-between">
          <span className="text-sm font-bold text-primary">تماس بگیرید</span>
          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/5 text-primary rotate-180 group-hover:bg-primary group-hover:text-white transition-colors">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path
                d="M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.4-1.4L18 12.7H4a1 1 0 1 1 0-2h14L13.3 6.7a1 1 0 0 1 0-1.4Z"
                fill="currentColor"
              />
            </svg>
          </span>
        </div>
      </div>
    </Link>
  );
}
