import { Link } from "@tanstack/react-router";
import { MEDIUM_LABEL, type Product } from "@/lib/catalog";
import { libraryBySlug } from "@/lib/libraries";
import { formatUsd } from "@/lib/utils";

export function ProductCard({ product }: { product: Product }) {
  const lib = libraryBySlug(product.library);
  return (
    <Link
      to="/store/$id"
      params={{ id: product.id }}
      className="group block rounded-xl bg-bg-elevated p-2 shadow-[var(--shadow-card)] transition-transform duration-150 hover:-translate-y-0.5"
    >
      <div className="overflow-hidden rounded-lg bg-bg-subtle">
        <img
          src={product.image}
          alt={product.title}
          className="aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
        />
      </div>
      <div className="px-2 pb-3 pt-3">
        <p className="text-[11px] uppercase tracking-[0.16em] text-subtle">
          {lib?.name} · {MEDIUM_LABEL[product.medium]}
        </p>
        <h3 className="mt-1 font-display text-lg text-fg">{product.title}</h3>
        <p className="text-sm text-muted">{product.artist}</p>
        <p className="mt-2 text-sm tabular-nums text-fg">{formatUsd(product.priceCents)}</p>
      </div>
    </Link>
  );
}