import type { CSSProperties } from 'react'

export type IconName =
  | 'pickaxe' | 'mountain' | 'truck' | 'factory' | 'map' | 'pin' | 'search'
  | 'filter' | 'grid' | 'list' | 'arrow-right' | 'arrow-left' | 'check'
  | 'verified' | 'x' | 'plus' | 'minus' | 'bell' | 'user' | 'compare'
  | 'external' | 'download' | 'chart' | 'trend-up' | 'drill' | 'layers'

export function Icon({
  name,
  size = 16,
  stroke = 1.5,
  color = 'currentColor',
  style,
}: {
  name: IconName
  size?: number
  stroke?: number
  color?: string
  style?: CSSProperties
}) {
  const props = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: color,
    strokeWidth: stroke,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
    style,
  }
  switch (name) {
    case 'pickaxe':
      return <svg {...props}><path d="M4 20 L14 10" /><path d="M7 5 C10 2, 18 3, 21 8 C17 6, 12 7, 10 9" /><circle cx="4.5" cy="19.5" r="0.8" fill="currentColor" stroke="none" /></svg>
    case 'layers':
      return <svg {...props}><path d="M12 3 L22 8 L12 13 L2 8 Z" /><path d="M2 13 L12 18 L22 13" /><path d="M2 18 L12 23 L22 18" /></svg>
    case 'mountain':
      return <svg {...props}><path d="M2 20 L9 8 L13 14 L17 10 L22 20 Z" /><path d="M7.5 11 L9 8 L11 11" /></svg>
    case 'truck':
      return <svg {...props}><rect x="2" y="10" width="11" height="8" /><path d="M13 12 L18 12 L22 16 L22 18 L13 18" /><circle cx="6" cy="19.5" r="1.8" /><circle cx="18" cy="19.5" r="1.8" /></svg>
    case 'factory':
      return <svg {...props}><path d="M3 20 V11 L9 14 V11 L15 14 V8 L21 8 V20 Z" /><path d="M7 17 H8 M11 17 H12 M15 17 H16 M19 17 H20" /></svg>
    case 'map':
      return <svg {...props}><path d="M3 6 L9 4 L15 6 L21 4 V18 L15 20 L9 18 L3 20 Z" /><path d="M9 4 V18" /><path d="M15 6 V20" /></svg>
    case 'pin':
      return <svg {...props}><path d="M12 22 C8 17, 5 13, 5 9 a7 7 0 0 1 14 0 C19 13, 16 17, 12 22 Z" /><circle cx="12" cy="9" r="2.5" /></svg>
    case 'search':
      return <svg {...props}><circle cx="10.5" cy="10.5" r="6.5" /><path d="M15.5 15.5 L21 21" /></svg>
    case 'filter':
      return <svg {...props}><path d="M3 5 H21" /><path d="M6 12 H18" /><path d="M10 19 H14" /></svg>
    case 'grid':
      return <svg {...props}><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></svg>
    case 'list':
      return <svg {...props}><path d="M8 6 H21" /><path d="M8 12 H21" /><path d="M8 18 H21" /><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none" /><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none" /><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none" /></svg>
    case 'arrow-right':
      return <svg {...props}><path d="M5 12 H20" /><path d="M14 6 L20 12 L14 18" /></svg>
    case 'arrow-left':
      return <svg {...props}><path d="M19 12 H4" /><path d="M10 6 L4 12 L10 18" /></svg>
    case 'check':
      return <svg {...props}><path d="M4 12 L10 18 L20 6" /></svg>
    case 'verified':
      return <svg {...props}><path d="M12 2 L14.5 4.5 L18 4 L18.5 7.5 L21 10 L19.5 13 L21 16 L18 17 L17 20 L13.5 19.5 L12 22 L10.5 19.5 L7 20 L6 17 L3 16 L4.5 13 L3 10 L5.5 7.5 L6 4 L9.5 4.5 Z" /><path d="M8.5 12 L11 14.5 L16 9.5" /></svg>
    case 'x':
      return <svg {...props}><path d="M5 5 L19 19" /><path d="M19 5 L5 19" /></svg>
    case 'plus':
      return <svg {...props}><path d="M12 5 V19" /><path d="M5 12 H19" /></svg>
    case 'minus':
      return <svg {...props}><path d="M5 12 H19" /></svg>
    case 'bell':
      return <svg {...props}><path d="M6 17 V10 a6 6 0 0 1 12 0 V17" /><path d="M4 17 H20" /><path d="M10 20 A2 2 0 0 0 14 20" /></svg>
    case 'user':
      return <svg {...props}><circle cx="12" cy="8" r="4" /><path d="M4 21 C4 16, 8 14, 12 14 C16 14, 20 16, 20 21" /></svg>
    case 'compare':
      return <svg {...props}><rect x="3" y="5" width="7" height="14" /><rect x="14" y="9" width="7" height="10" /><path d="M10 12 H14" /></svg>
    case 'external':
      return <svg {...props}><path d="M14 4 H20 V10" /><path d="M20 4 L11 13" /><path d="M18 14 V20 H4 V6 H10" /></svg>
    case 'download':
      return <svg {...props}><path d="M12 4 V16" /><path d="M6 10 L12 16 L18 10" /><path d="M4 20 H20" /></svg>
    case 'chart':
      return <svg {...props}><path d="M3 20 H21" /><path d="M6 20 V14" /><path d="M11 20 V8" /><path d="M16 20 V11" /><path d="M21 20 V5" /></svg>
    case 'trend-up':
      return <svg {...props}><path d="M3 17 L9 11 L13 15 L21 7" /><path d="M15 7 H21 V13" /></svg>
    case 'drill':
      return <svg {...props}><rect x="3" y="9" width="12" height="6" /><path d="M15 10 L20 7 M15 12 L22 12 M15 14 L20 17" /><circle cx="7" cy="12" r="1" fill="currentColor" stroke="none" /></svg>
    default:
      return null
  }
}