import { Link } from "@tanstack/react-router";
import { formatPrice, type Product } from "@/lib/products";
import { Stars } from "./Stars";

export function ProductCard({ p, avg, count }: { p: Product; avg: number; count: number }) {
  return (
    <Link to="/products/$slug" params={{ slug: p.slug }} className="group block overflow-hidden rounded-2xl bg-card shadow-sm transition hover:shadow-[var(--shadow-glow)]">
      <div className="aspect-[4/5] overflow-hidden bg-secondary">
        <img src={p.image} alt={p.name} loading="lazy" width={800} height={1000} className="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
      </div>
      <div className="space-y-1 p-4">
        <p className="text-xs uppercase tracking-widest text-muted-foreground">{p.shade} · {p.finish}</p>
        <h3 className="text-lg font-semibold">{p.name}</h3>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Stars value={avg} size={14} /> <span>{count ? `${avg.toFixed(1)} (${count})` : "No reviews yet"}</span>
        </div>
        <p className="font-semibold text-primary">{formatPrice(p.price)}</p>
      </div>
    </Link>
  );
}