import * as React from 'react';

type IconProps = {
  name: string;
  size?: number;
  stroke?: number;
  style?: React.CSSProperties;
  fill?: string;
  className?: string;
  onClick?: (e: React.MouseEvent) => void;
};

export function Icon({ name, size = 24, stroke = 2, style, fill = 'none', className, onClick }: IconProps) {
  const common = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill,
    stroke: 'currentColor',
    strokeWidth: stroke,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
    style,
    className,
    onClick,
  };
  const P: Record<string, React.ReactNode> = {
    search: <><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></>,
    pin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></>,
    star: <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L4.5 9.7l5.9-.9L12 3.5Z" />,
    arrowRight: <><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></>,
    arrowLeft: <><path d="M19 12H5" /><path d="M11 6l-6 6 6 6" /></>,
    arrowUpRight: <><path d="M7 17L17 7" /><path d="M8 7h9v9" /></>,
    chevronRight: <path d="M9 5l7 7-7 7" />,
    chevronDown: <path d="M5 9l7 7 7-7" />,
    chevronLeft: <path d="M15 5l-7 7 7 7" />,
    check: <path d="M4 12.5l5 5 11-11" />,
    checkCircle: <><circle cx="12" cy="12" r="9" /><path d="M8.5 12l2.4 2.4 4.6-4.8" /></>,
    x: <><path d="M6 6l12 12M18 6L6 18" /></>,
    plus: <><path d="M12 5v14M5 12h14" /></>,
    minus: <path d="M5 12h14" />,
    sliders: <><path d="M4 6h16M4 12h16M4 18h16" /><circle cx="9" cy="6" r="2.2" fill="var(--card,#fff)" /><circle cx="15" cy="12" r="2.2" fill="var(--card,#fff)" /><circle cx="8" cy="18" r="2.2" fill="var(--card,#fff)" /></>,
    map: <><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" /><path d="M9 4v14M15 6v14" /></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13" /><circle cx="3.5" cy="6" r="1" /><circle cx="3.5" cy="12" r="1" /><circle cx="3.5" cy="18" r="1" /></>,
    grid: <><rect x="4" y="4" width="7" height="7" rx="1.5" /><rect x="13" y="4" width="7" height="7" rx="1.5" /><rect x="4" y="13" width="7" height="7" rx="1.5" /><rect x="13" y="13" width="7" height="7" rx="1.5" /></>,
    utensils: <><path d="M5 3v7a2 2 0 0 0 4 0V3M7 10v11M16 3c-1.5 0-3 1.8-3 5 0 2.4 1 3.6 2 4v9" /></>,
    bed: <><path d="M3 8v11M3 13h18v6M21 19v-4a3 3 0 0 0-3-3h-6v4" /><circle cx="7" cy="11" r="1.6" /></>,
    coffee: <><path d="M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9Z" /><path d="M16 10h2a2.5 2.5 0 0 1 0 5h-2M7 3v2M11 3v2" /></>,
    scissors: <><circle cx="6" cy="6" r="2.5" /><circle cx="6" cy="18" r="2.5" /><path d="M8 8l12 8M8 16L20 8" /></>,
    flower: <><circle cx="12" cy="9" r="2.5" /><path d="M12 9c0-3-1.5-4.5-3-4.5S6.5 6 9.5 9M12 9c0-3 1.5-4.5 3-4.5S17.5 6 14.5 9M12 9c-3 0-4.5 1.5-4.5 3S15 13.5 12 9M12 9c3 0 4.5 1.5 4.5 3S9 13.5 12 9M12 11v10" /></>,
    car: <><path d="M5 13l1.5-4.5A2 2 0 0 1 8.4 7h7.2a2 2 0 0 1 1.9 1.5L19 13M5 13h14v4H5zM5 17v2M19 17v2" /><circle cx="8" cy="15" r="0.5" /><circle cx="16" cy="15" r="0.5" /></>,
    cake: <><path d="M4 20h16M5 20v-7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v7M4 15c1.5 1.2 2.5 1.2 4 0s2.5-1.2 4 0 2.5 1.2 4 0 2.5-1.2 4 0M12 8V5M9 5h6" /></>,
    spa: <><path d="M12 21c-4-2.5-7-6-7-10a7 7 0 0 1 14 0c0 4-3 7.5-7 10Z" /><path d="M9 11c1 1 2 1.5 3 1.5s2-.5 3-1.5" /></>,
    store: <><path d="M4 9l1-4h14l1 4M4 9v10h16V9M4 9h16M9 19v-5h6v5" /></>,
    bag: <><path d="M6 8h12l-1 12H7L6 8Z" /><path d="M9 8V6a3 3 0 0 1 6 0v2" /></>,
    shirt: <><path d="M8 3l4 2 4-2 5 4-3 3-1-1v11H7V9L6 10 3 7l5-4Z" /></>,
    heart: <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z" />,
    verified: <><path d="M12 3l2.2 1.6 2.7-.2 1 2.5 2.3 1.4-.7 2.6.7 2.6-2.3 1.4-1 2.5-2.7-.2L12 21l-2.2-1.6-2.7.2-1-2.5-2.3-1.4.7-2.6-.7-2.6 2.3-1.4 1-2.5 2.7.2L12 3Z" /><path d="M8.5 12l2.2 2.2 4.3-4.3" /></>,
    clock: <><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></>,
    phone: <path d="M5 4h3l1.5 4.5L7.5 10a11 11 0 0 0 5 5l1.5-2 4.5 1.5V18a2 2 0 0 1-2 2A14 14 0 0 1 3 6a2 2 0 0 1 2-2Z" />,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="M4 7l8 6 8-6" /></>,
    lock: <><rect x="4.5" y="10" width="15" height="10" rx="2.5" /><path d="M8 10V7a4 4 0 0 1 8 0v3" /></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></>,
    user: <><circle cx="12" cy="8" r="3.5" /><path d="M5 20a7 7 0 0 1 14 0" /></>,
    users: <><circle cx="9" cy="8" r="3" /><path d="M3 19a6 6 0 0 1 12 0M16 5.5a3 3 0 0 1 0 5.5M21 19a6 6 0 0 0-5-5.9" /></>,
    calendar: <><rect x="4" y="5" width="16" height="16" rx="2.5" /><path d="M4 9h16M9 3v4M15 3v4" /></>,
    globe: <><circle cx="12" cy="12" r="8.5" /><path d="M3.5 12h17M12 3.5c2.5 2.5 2.5 14 0 17M12 3.5c-2.5 2.5-2.5 14 0 17" /></>,
    sparkles: <><path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3Z" /><path d="M19 14l.9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9L19 14Z" /></>,
    trending: <><path d="M3 17l6-6 4 4 7-7" /><path d="M17 8h4v4" /></>,
    chart: <><path d="M4 20V4M4 20h16" /><rect x="7" y="12" width="3" height="5" /><rect x="12" y="8" width="3" height="9" /><rect x="17" y="5" width="3" height="12" /></>,
    bell: <><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z" /><path d="M10 19a2 2 0 0 0 4 0" /></>,
    settings: <><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M22 12h-3M5 12H2M19 5l-2 2M7 17l-2 2M19 19l-2-2M7 7L5 5" /></>,
    share: <><circle cx="6" cy="12" r="2.5" /><circle cx="17" cy="6" r="2.5" /><circle cx="17" cy="18" r="2.5" /><path d="M8.2 11l6.6-3.6M8.2 13l6.6 3.6" /></>,
    wifi: <><path d="M5 12.5a10 10 0 0 1 14 0M8 15.5a6 6 0 0 1 8 0" /><circle cx="12" cy="19" r="1" fill="currentColor" /></>,
    parking: <><rect x="4" y="4" width="16" height="16" rx="3" /><path d="M9 17V8h3.5a2.5 2.5 0 0 1 0 5H9" /></>,
    card: <><rect x="3" y="6" width="18" height="12" rx="2.5" /><path d="M3 10h18" /></>,
    logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 16l4-4-4-4M20 12H9" /></>,
    edit: <><path d="M4 20h4L19 9l-4-4L4 16v4Z" /><path d="M14 6l4 4" /></>,
    camera: <><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z" /><circle cx="12" cy="13" r="3.5" /></>,
    menu: <path d="M4 7h16M4 12h16M4 17h16" />,
    home: <><path d="M4 11l8-7 8 7" /><path d="M6 10v10h12V10" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 7.5v.2" /></>,
    gift: <><rect x="4" y="9" width="16" height="11" rx="1.5" /><path d="M2 9h20v3H2zM12 9v11M12 9S10 3 7.5 4.5 9.5 9 12 9ZM12 9s2-6 4.5-4.5S14.5 9 12 9Z" /></>,
    tag: <><path d="M4 12V5a1 1 0 0 1 1-1h7l8 8-8 8-8-8Z" /><circle cx="8.5" cy="8.5" r="1.3" fill="currentColor" /></>,
    qr: <><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="14" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><path d="M14 14h3v3M20 14v6M17 20h3" /></>,
    smartphone: <><rect x="7" y="2.5" width="10" height="19" rx="2.5" /><path d="M10.5 18.5h3" /></>,
    laptop: <><rect x="4" y="5" width="16" height="11" rx="1.5" /><path d="M2 20h20M9 20l.5-2h5l.5 2" /></>,
    sofa: <><path d="M4 11V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3" /><path d="M2 13a2 2 0 0 1 2 2v2h16v-2a2 2 0 0 1 2-2 2 2 0 0 0-2-2H4a2 2 0 0 0-2 2ZM5 17v2M19 17v2" /></>,
    tv: <><rect x="3" y="6" width="18" height="12" rx="2" /><path d="M8 22h8M12 2l-3 4M12 2l3 4" /></>,
    washer: <><rect x="5" y="3" width="14" height="18" rx="2" /><circle cx="12" cy="13" r="4.5" /><path d="M8 6.5h.2M11 6.5h.2" /></>,
    gamepad: <><path d="M7 11h-.5a4.5 4.5 0 0 0 0 9c1.4 0 2-1 3.5-1h4c1.5 0 2.1 1 3.5 1a4.5 4.5 0 0 0 0-9H17" /><path d="M8 13v3M6.5 14.5h3M15 14h.2M17 16h.2" /><path d="M9 11V8a3 3 0 0 1 3-3h0" /></>,
    bike: <><circle cx="6" cy="17" r="3.5" /><circle cx="18" cy="17" r="3.5" /><path d="M6 17l4-8h5l2 8M9 9h5l1.5 4M9.5 6h2" /></>,
    ruler: <><rect x="2" y="8" width="20" height="8" rx="1.5" /><path d="M7 8v3M11 8v4M15 8v3M19 8v4" /></>,
    message: <><path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-4 3v-3H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" /></>,
    shield: <><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z" /><path d="M9 12l2 2 4-4" /></>,
    image: <><rect x="3" y="4" width="18" height="16" rx="2.5" /><circle cx="8.5" cy="9.5" r="1.8" /><path d="M21 16l-5-5-7 7" /></>,
    banknote: <><rect x="2.5" y="6" width="19" height="12" rx="2" /><circle cx="12" cy="12" r="2.5" /><path d="M6 9.5h.2M18 14.5h.2" /></>,
    flame: <><path d="M12 3c1 3 4 4.5 4 8a4 4 0 0 1-8 0c0-1.5.5-2.5 1-3 .2 1 .8 1.5 1.5 1.5C11 9.5 10.5 6 12 3Z" /></>,
    refresh: <><path d="M4 12a8 8 0 0 1 14-5.3L21 9M21 4v5h-5" /><path d="M20 12a8 8 0 0 1-14 5.3L3 15M3 20v-5h5" /></>,
  };
  return <svg {...common}>{P[name] ?? null}</svg>;
}

export function Stars({ value = 5, size = 14 }: { value?: number; size?: number }) {
  const full = Math.round(value);
  return (
    <span className="stars">
      {[0, 1, 2, 3, 4].map((i) => (
        <Icon
          key={i}
          name="star"
          size={size}
          fill={i < full ? 'var(--gold)' : 'none'}
          style={{ color: i < full ? 'var(--gold)' : 'var(--line3)' }}
          stroke={1.5}
        />
      ))}
    </span>
  );
}