// Ícones SVG — recebem todas as props padrão; default 1em x 1em (escala com font-size).
const Icon = ({ children, size, className = "", style, ...rest }) => (
  <svg
    viewBox="0 0 24 24"
    width={size || "1em"}
    height={size || "1em"}
    fill="none"
    stroke="currentColor"
    strokeWidth="1.6"
    className={className}
    style={{ flexShrink: 0, verticalAlign: "middle", ...style }}
    {...rest}
  >
    {children}
  </svg>
);

const Icons = {
  Clover: (p) => (
    <Icon {...p}>
      <path strokeWidth="1.5" d="M12 6c0-2 1.5-3 3-3s3 1 3 3-1 3-3 3M12 6c0-2-1.5-3-3-3S6 4 6 6s1 3 3 3M12 18c0 2 1.5 3 3 3s3-1 3-3-1-3-3-3M12 18c0-2-1.5-3-3-3s-3 1-3 3 1 3 3 3M12 6v12M9 9l-3-3M15 9l3-3M9 15l-3 3M15 15l3 3" strokeLinecap="round" />
    </Icon>
  ),
  Logout: (p) => (
    <Icon {...p}>
      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" strokeLinecap="round" strokeLinejoin="round"/>
    </Icon>
  ),
  Home: (p) => (
    <Icon {...p}>
      <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2v-9z" strokeLinejoin="round" strokeLinecap="round"/>
    </Icon>
  ),
  Gift: (p) => (
    <Icon {...p}>
      <rect x="3" y="8" width="18" height="13" rx="1.5" />
      <path d="M3 12h18M12 8v13M7 8a2.5 2.5 0 1 1 0-5c2 0 3 2 5 5M17 8a2.5 2.5 0 1 0 0-5c-2 0-3 2-5 5" strokeLinejoin="round"/>
    </Icon>
  ),
  Calendar: (p) => (
    <Icon {...p}>
      <rect x="3" y="5" width="18" height="16" rx="2"/>
      <path d="M3 10h18M8 3v4M16 3v4" strokeLinecap="round"/>
    </Icon>
  ),
  Mail: (p) => (
    <Icon {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7l9 6 9-6" strokeLinejoin="round"/>
    </Icon>
  ),
  Pin: (p) => (
    <Icon {...p}>
      <path d="M12 22s-7-7.5-7-13a7 7 0 1 1 14 0c0 5.5-7 13-7 13z"/>
      <circle cx="12" cy="9" r="2.5"/>
    </Icon>
  ),
  Star: (p) => (
    <Icon {...p} fill="currentColor" stroke="none">
      <path d="M12 2l2.4 6.9H22l-6 4.5 2.4 7-6.4-4.7L5.6 20l2.4-7-6-4.5h7.6z"/>
    </Icon>
  ),
  Search: (p) => (
    <Icon {...p} strokeWidth="1.8">
      <circle cx="11" cy="11" r="7"/>
      <path d="M21 21l-4.3-4.3" strokeLinecap="round"/>
    </Icon>
  ),
  Check: (p) => (
    <Icon {...p} strokeWidth="2.2">
      <path d="M5 12l4.5 4.5L19 7" strokeLinecap="round" strokeLinejoin="round"/>
    </Icon>
  ),
  Copy: (p) => (
    <Icon {...p}>
      <rect x="9" y="9" width="12" height="12" rx="2"/>
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" strokeLinejoin="round"/>
    </Icon>
  ),
  Heart: (p) => (
    <Icon {...p} fill="currentColor" stroke="none">
      <path d="M12 21s-7-4.5-9.5-9C1 9 2 5 5.5 4S11 6 12 8c1-2 3-5 6.5-4S23 9 21.5 12C19 16.5 12 21 12 21z"/>
    </Icon>
  ),
  Shirt: (p) => (
    <Icon {...p}>
      <path d="M4 7l4-4 2 2 2 1 2-1 2-2 4 4-3 3v10H7V10L4 7z" strokeLinejoin="round"/>
    </Icon>
  ),
  Clock: (p) => (
    <Icon {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 7v5l3.5 2" strokeLinecap="round"/>
    </Icon>
  ),
  Card: (p) => (
    <Icon {...p}>
      <rect x="2.5" y="5" width="19" height="14" rx="2.5"/>
      <path d="M2.5 9.5h19M6 15h4" strokeLinecap="round"/>
    </Icon>
  ),
  Menu: (p) => (
    <Icon {...p} strokeWidth="2">
      <path d="M3 6h18M3 12h18M3 18h18" strokeLinecap="round"/>
    </Icon>
  ),
  Close: (p) => (
    <Icon {...p} strokeWidth="2">
      <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round"/>
    </Icon>
  ),
  ArrowUp: (p) => (
    <Icon {...p} strokeWidth="2">
      <path d="M12 19V5M6 11l6-6 6 6" strokeLinecap="round" strokeLinejoin="round"/>
    </Icon>
  ),
  ArrowDown: (p) => (
    <Icon {...p} strokeWidth="2">
      <path d="M12 5v14M6 13l6 6 6-6" strokeLinecap="round" strokeLinejoin="round"/>
    </Icon>
  ),
};

// Divisor minimalista
function Divider() {
  return (
    <svg width="100" height="14" viewBox="0 0 100 14" style={{display:'block', margin:'14px auto'}} aria-hidden="true">
      <line x1="0" y1="7" x2="40" y2="7" stroke="#5b6638" strokeWidth="0.8"/>
      <line x1="60" y1="7" x2="100" y2="7" stroke="#5b6638" strokeWidth="0.8"/>
      <circle cx="50" cy="7" r="2" fill="none" stroke="#5b6638" strokeWidth="0.8"/>
    </svg>
  );
}

Object.assign(window, { Icons, Divider });
