import type { ReactNode } from "react";

export type ProductIconName =
  | "oil"
  | "mineral"
  | "food"
  | "chemical"
  | "livestock"
  | "appliance"
  | "construction";

/**
 * Minimal line icons for the product categories. Single weight, no fills, and
 * they draw in `currentColor` so a card can recolour them on hover.
 */
const shapes: Record<ProductIconName, ReactNode> = {
  // Droplet — oil derivatives
  oil: <path d="M12 3.5c3.2 3.7 5 6.5 5 8.7a5 5 0 0 1-10 0c0-2.2 1.8-5 5-8.7Z" />,

  // Mountain range — mineral products
  mineral: (
    <>
      <path d="M2.5 19.5h19L14.6 7.5l-3.1 5.2-2.2-3.1z" />
      <path d="M6.2 14.2h3.4" />
    </>
  ),

  // Wheat stalk — food materials and products
  food: (
    <>
      <path d="M12 21V7" />
      <path d="M12 11.5 8.4 8.8M12 11.5l3.6-2.7" />
      <path d="M12 16.2l-3.6-2.7M12 16.2l3.6-2.7" />
    </>
  ),

  // Conical flask — chemical products
  chemical: (
    <>
      <path d="M9.5 3h5" />
      <path d="M10.6 3v6.3L5.8 18a2 2 0 0 0 1.8 3h8.8a2 2 0 0 0 1.8-3l-4.8-8.7V3" />
    </>
  ),

  // Feed sack — livestock and poultry inputs
  livestock: (
    <>
      <path d="M9.2 3h5.6l-.8 3.2H10z" />
      <path d="M10 6.2h4c2 1 3.3 3 3.3 5.2v5.3A4.3 4.3 0 0 1 13 21h-2a4.3 4.3 0 0 1-4.3-4.3v-5.3c0-2.2 1.3-4.2 3.3-5.2Z" />
    </>
  ),

  // Washing machine — home appliances
  appliance: (
    <>
      <rect x="4.5" y="3" width="15" height="18" rx="2" />
      <circle cx="12" cy="14" r="3.8" />
      <path d="M8 6.6h.01M11 6.6h.01" />
    </>
  ),

  // Brick wall — building materials and equipment
  construction: (
    <>
      <path d="M3.5 5.5h17v13h-17z" />
      <path d="M3.5 12h17" />
      <path d="M9.5 5.5V12M14.5 12v6.5" />
    </>
  ),
};

export default function ProductIcon({
  name,
  className = "h-11 w-11 sm:h-12 sm:w-12",
}: {
  name: ProductIconName;
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.4}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      className={className}
    >
      {shapes[name]}
    </svg>
  );
}