import type { ReactNode } from "react";

/**
 * Accurate, item-matching line icons keyed by category slug. Uses currentColor
 * so it inherits text color / gradients. Falls back to the provided emoji, then
 * a generic chip icon, for slugs without a dedicated drawing.
 */

const PATHS: Record<string, ReactNode> = {
  laptops: (
    <>
      <rect x="4" y="4.5" width="16" height="11" rx="1.5" />
      <path d="M2 19.5h20l-1-2H3z" />
      <path d="M10.5 8.5h3" />
    </>
  ),
  desktops: (
    <>
      <rect x="6.5" y="3" width="11" height="18" rx="1.5" />
      <path d="M10 7h4" />
      <path d="M10 10h4" />
      <circle cx="12" cy="17.5" r="1.1" />
    </>
  ),
  monitors: (
    <>
      <rect x="3" y="4.5" width="18" height="11.5" rx="1.5" />
      <path d="M8.5 20h7" />
      <path d="M12 16v4" />
    </>
  ),
  ram: (
    <>
      <path d="M3 8.5h18v6.5H3z" />
      <rect x="6" y="10.2" width="3.4" height="3" rx="0.4" />
      <rect x="14.6" y="10.2" width="3.4" height="3" rx="0.4" />
      <path d="M5 15v2.4M7 15v2.4M9 15v2.4M15 15v2.4M17 15v2.4M19 15v2.4" />
      <path d="M11 15v1.3M13 15v1.3" />
    </>
  ),
  storage: (
    <>
      <rect x="4" y="4" width="16" height="16" rx="2" />
      <path d="M8 8h6" />
      <path d="M8 11h4" />
      <circle cx="16" cy="16" r="1.1" />
    </>
  ),
  tvs: (
    <>
      <rect x="3" y="5" width="18" height="12" rx="1.5" />
      <path d="M8.5 21l3.5-3.5L15.5 21" />
    </>
  ),
  "sound-systems": (
    <>
      <rect x="6.5" y="3" width="11" height="18" rx="2" />
      <circle cx="12" cy="15" r="3" />
      <circle cx="12" cy="7" r="1.1" />
    </>
  ),
  accessories: (
    <>
      <rect x="2.5" y="7" width="19" height="10" rx="1.7" />
      <path d="M6 10h.01M9 10h.01M12 10h.01M15 10h.01M18 10h.01" />
      <path d="M8 13.5h8" />
    </>
  ),
};

const FALLBACK = (
  <>
    <rect x="6" y="6" width="12" height="12" rx="1.5" />
    <path d="M9 3v2M15 3v2M9 19v2M15 19v2M3 9h2M3 15h2M19 9h2M19 15h2" />
  </>
);

export function CategoryIcon({
  slug,
  emoji,
  className = "h-6 w-6",
}: {
  slug: string;
  emoji?: string | null;
  className?: string;
}) {
  const drawing = PATHS[slug];

  // Unknown slug (e.g. an admin-created category): use its emoji if present.
  if (!drawing && emoji) {
    return (
      <span className={className} aria-hidden style={{ lineHeight: 1 }}>
        {emoji}
      </span>
    );
  }

  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.6}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {drawing ?? FALLBACK}
    </svg>
  );
}