import Link from "next/link";
import ProductPhoto from "@/components/ui/ProductPhoto";
import type { ApiProduct } from "@/lib/api/types";

const CATEGORY_COLORS: Record<string, string> = {
  Steel: "bg-blue-100 text-blue-700",
  "Non Ferrous": "bg-amber-100 text-amber-700",
  Polymers: "bg-purple-100 text-purple-700",
  Chemicals: "bg-green-100 text-green-700",
  Energy: "bg-orange-100 text-orange-700",
  Construction: "bg-indigo-100 text-indigo-700",
};

type Props = {
  product: ApiProduct;
  /** Passed straight to next/image; set per grid so the right source is picked. */
  sizes?: string;
};

/**
 * Catalog card, shared by the products listing and the category pages.
 *
 * No price is shown here on purpose: a commodity product has no single price,
 * only per-seller offers. The card leads to the seller offers list, which is
 * where real Ex-Works / F.O.R numbers appear.
 */
export default function ProductCard({
  product,
  sizes = "(max-width: 1024px) 50vw, 33vw",
}: Props) {
  const categoryName = product.category?.name || "General";

  return (
    <Link
      href={`/products/${product.slug || product.id}/sellers`}
      className="group flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm card-hover"
    >
      {/* Square, like the catalogue photos: ProductPhoto fills it edge to edge
          without cropping the goods. */}
      <div className="relative aspect-square overflow-hidden bg-white">
        <ProductPhoto src={product.thumbnail} alt={product.name} sizes={sizes} />
      </div>

      <div className="flex flex-1 flex-col p-5">
        <span
          className={`inline-block text-xs font-semibold px-2.5 py-1 rounded-full mb-4 ${
            CATEGORY_COLORS[categoryName] || "bg-gray-100 text-gray-600"
          }`}
        >
          {categoryName}
        </span>

        <h3 className="font-bold text-gray-900 text-base mb-1 group-hover:text-[#CC1414] transition-colors">
          {product.name}
        </h3>
        <p className="text-xs text-gray-400 mb-4">
          {product.unit?.name ? `Unit: ${product.unit.name}` : "B2B Pricing"}
        </p>

        <span className="mt-auto block w-full rounded-lg bg-[#CC1414] px-4 py-2.5 text-center text-sm font-semibold text-white transition-colors group-hover:bg-[#A50E0E]">
          Get Best Price
        </span>
      </div>
    </Link>
  );
}