import Link from "next/link";
import { HoverCard } from "@/components/client/HoverCard";
import { SHOP_ENABLED } from "@/lib/shop-config";
import type { Product } from "@/lib/types";

/**
 * ProductCard — karta produktu dla PLP, styl editorial.
 * `version` prop determines link prefix.
 */
export function ProductCard({
  product,
  version = "v2",
}: {
  product: Product;
  version?: string;
}) {
  const prefix = `/${version}`;
  return (
    <article className="group flex flex-col">
      <HoverCard product={product} href={`${prefix}/produkt/${product.sku}`} />

      <div className="mt-6 flex flex-col gap-2">
        <p className="text-[10px] font-bold uppercase tracking-[0.3em] text-ash">
          {product.collection}
        </p>
        <Link
          href={`${prefix}/produkt/${product.sku}`}
          className="text-[clamp(1.125rem,2vw,1.5rem)] font-extrabold leading-[1.1] tracking-[-0.01em] text-ink transition-colors hover:text-graphite"
        >
          {product.name}
        </Link>

        <div className="mt-2 flex items-baseline justify-between">
          {SHOP_ENABLED && (
            <div className="flex items-baseline gap-2">
              <span className="text-base font-bold tabular-nums text-ink">
                {product.base_price.toLocaleString("pl-PL")} zł
              </span>
              {product.compare_at_price && (
                <span className="text-xs tabular-nums text-promo line-through">
                  {product.compare_at_price.toLocaleString("pl-PL")}
                </span>
              )}
            </div>
          )}
          {!SHOP_ENABLED && <span className="text-[10px] uppercase tracking-[0.2em] text-ash">Make-to-Order</span>}
          {SHOP_ENABLED && product.rating && (
            <span className="text-[10px] text-ash">{product.rating} ★</span>
          )}
        </div>
      </div>
    </article>
  );
}