// ---------------------------------------------------------------------------
// Fabri-Ka — inline SVG icon set (no runtime dependency)
// ---------------------------------------------------------------------------
import { ReactElement, SVGProps } from 'react'

type IconProps = SVGProps<SVGSVGElement> & { size?: number }

function Svg({ size = 20, children, ...rest }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
      {...rest}
    >
      {children}
    </svg>
  )
}

export function IconHome(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M3 10.5 12 3l9 7.5" />
      <path d="M5.5 9.5V20a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9.5" />
      <path d="M9.5 21v-6h5v6" />
    </Svg>
  )
}

export function IconGrid(props: IconProps) {
  return (
    <Svg {...props}>
      <rect x="3.5" y="3.5" width="7" height="7" rx="1.5" />
      <rect x="13.5" y="3.5" width="7" height="7" rx="1.5" />
      <rect x="3.5" y="13.5" width="7" height="7" rx="1.5" />
      <rect x="13.5" y="13.5" width="7" height="7" rx="1.5" />
    </Svg>
  )
}

export function IconStore(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M4 9.5 5.4 4h13.2L20 9.5" />
      <path d="M4 9.5a2.6 2.6 0 0 0 5.3 0 2.65 2.65 0 0 0 5.4 0 2.6 2.6 0 0 0 5.3 0" />
      <path d="M5 12.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7.5" />
      <path d="M9.5 21v-5.5h5V21" />
    </Svg>
  )
}

export function IconSearch(props: IconProps) {
  return (
    <Svg {...props}>
      <circle cx="11" cy="11" r="6.5" />
      <path d="m20.5 20.5-4.9-4.9" />
    </Svg>
  )
}

export function IconFilter(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M4 7h10M18 7h2" />
      <circle cx="16" cy="7" r="2" />
      <path d="M4 17h2M10 17h10" />
      <circle cx="8" cy="17" r="2" />
    </Svg>
  )
}

export function IconClose(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M6 6l12 12M18 6 6 18" />
    </Svg>
  )
}

export function IconChevronDown(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="m6 9 6 6 6-6" />
    </Svg>
  )
}

export function IconArrowRight(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M4.5 12h15" />
      <path d="m13.5 6 6 6-6 6" />
    </Svg>
  )
}

export function IconExternal(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M13.5 5H19v5.5" />
      <path d="M19 5 10.5 13.5" />
      <path d="M19 13.5V19H5V5h5.5" />
    </Svg>
  )
}

export function IconLeaf(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M5.5 20.5C5.5 11.5 10 4.5 20 4.5c0 10-5.5 14-14.5 16z" />
      <path d="M5.5 20.5C8 15 11.5 11 16 8.5" />
    </Svg>
  )
}

export function IconAlert(props: IconProps) {
  return (
    <Svg {...props}>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7.5V13" />
      <path d="M12 16.5h.01" />
    </Svg>
  )
}

export function IconMapPin(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z" />
      <circle cx="12" cy="10" r="2.5" />
    </Svg>
  )
}

export function IconDrop(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M12 3.5s6.5 7.2 6.5 11.3a6.5 6.5 0 0 1-13 0C5.5 10.7 12 3.5 12 3.5z" />
    </Svg>
  )
}

export function IconShirt(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="m8.5 4-5 3 2 4 2.5-1V20h8v-10l2.5 1 2-4-5-3a3.5 3.5 0 0 1-7 0z" />
    </Svg>
  )
}

export function IconGem(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M7 4h10l4 5.5L12 20.5 3 9.5 7 4z" />
      <path d="M3 9.5h18M12 20.5 8.5 9.5 12 4l3.5 5.5L12 20.5z" />
    </Svg>
  )
}

export function IconPalette(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M12 3a9 9 0 1 0 0 18c1.4 0 2.2-.9 2.2-2 0-1-.7-1.4-.7-2.3 0-.9.8-1.7 2-1.7h1.7A3.8 3.8 0 0 0 21 11.2C21 6.7 16.9 3 12 3z" />
      <circle cx="7.5" cy="10.5" r="0.5" fill="currentColor" />
      <circle cx="11" cy="7.5" r="0.5" fill="currentColor" />
      <circle cx="15.5" cy="8.5" r="0.5" fill="currentColor" />
    </Svg>
  )
}

export function IconSparkle(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M12 3.5 14 9.5l6 2-6 2-2 6-2-6-6-2 6-2 2-6z" />
    </Svg>
  )
}

export function IconCandle(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M12 3c1.2 1.6 2 2.7 2 3.8a2 2 0 0 1-4 0C10 5.7 10.8 4.6 12 3z" />
      <path d="M8.5 11h7V21h-7V11z" />
    </Svg>
  )
}

export function IconInstagram(props: IconProps) {
  return (
    <Svg {...props}>
      <rect x="4" y="4" width="16" height="16" rx="4.5" />
      <circle cx="12" cy="12" r="3.6" />
      <circle cx="16.9" cy="7.1" r="0.55" fill="currentColor" />
    </Svg>
  )
}

export function IconFacebook(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M13.5 20.5v-6.8h2.6l.4-3.1h-3V8.5c0-.9.45-1.6 1.7-1.6h1.5v-2.8c-.65-.1-1.4-.2-2.2-.2-2.3 0-3.9 1.4-3.9 4v2.7H8v3.1h2.6v6.8" />
    </Svg>
  )
}

export function IconDownload(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M12 3.5v11" />
      <path d="m7.5 10 4.5 4.5 4.5-4.5" />
      <path d="M4.5 19.5h15" />
    </Svg>
  )
}

export function IconTag(props: IconProps) {
  return (
    <Svg {...props}>
      <path d="M3.5 3.5h8l9 9-8 8-9-9v-8z" />
      <circle cx="8" cy="8" r="1.2" />
    </Svg>
  )
}

// ---------------------------------------------------------------------------
// Category label → icon
// ---------------------------------------------------------------------------

const CATEGORY_ICONS: { keywords: string[]; icon: (p: IconProps) => ReactElement }[] = [
  { keywords: ['érable', 'erable', 'miel', 'aliment', 'gourmand', 'épicerie', 'epicerie', 'café', 'cafe', 'thé', 'the ', 'boisson'], icon: IconLeaf },
  { keywords: ['beauté', 'beaute', 'soin', 'savon', 'cosmét', 'cosmet', 'corps'], icon: IconDrop },
  { keywords: ['maison', 'déco', 'deco', 'cuisine', 'meuble'], icon: IconHome },
  { keywords: ['vêtement', 'vetement', 'mode', 'accessoire', 'textile'], icon: IconShirt },
  { keywords: ['bijou', 'joaill'], icon: IconGem },
  { keywords: ['art', 'papeterie', 'illustration', 'création', 'creation'], icon: IconPalette },
  { keywords: ['bougie', 'chandelle', 'ambiance'], icon: IconCandle },
  { keywords: ['enfant', 'jouet', 'bébé', 'bebe'], icon: IconSparkle },
]

export function categoryIcon(label: string, size = 16): ReactElement {
  const l = label.toLowerCase()
  const match = CATEGORY_ICONS.find((c) => c.keywords.some((k) => l.includes(k)))
  const Icon = match?.icon ?? IconTag
  return <Icon size={size} />
}