/* global React */
const { useState } = React;

function Icon({ name, size = 16, stroke = 1.75, ...rest }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    ...rest,
  };
  switch (name) {
    case "clock": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "calendar": return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case "table": return <svg {...common}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 4v16"/></svg>;
    case "absence": return <svg {...common}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 4v4M17 4v4M3 10h18"/><path d="M9 14l6 4M15 14l-6 4" strokeDasharray="2 2"/></svg>;
    case "datev": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 12h8M8 8h8M8 16h5"/></svg>;
    case "check": return <svg {...common}><path d="M5 12l4 4L19 6"/></svg>;
    case "plus": return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "arrow-right": return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "users": return <svg {...common}><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M15 20c0-2.5 1.8-4 4-4s2.5 1.2 2.5 4"/></svg>;
    case "phone": return <svg {...common}><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg>;
    case "shield": return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>;
    case "spark": return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg>;
    case "menu": return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "close": return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "external": return <svg {...common}><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/></svg>;
    case "stopwatch": return <svg {...common}><circle cx="12" cy="14" r="7"/><path d="M12 11v3l2 2M9 2h6M12 7V4"/></svg>;
    case "trend": return <svg {...common}><path d="M3 17l6-6 4 4 8-9"/><path d="M14 6h7v7"/></svg>;
    case "paw": return <svg {...common}><circle cx="6" cy="10" r="2"/><circle cx="10" cy="6" r="2"/><circle cx="14" cy="6" r="2"/><circle cx="18" cy="10" r="2"/><path d="M8 18c0-2.5 1.8-5 4-5s4 2.5 4 5c0 1.7-1.5 3-4 3s-4-1.3-4-3z"/></svg>;
    case "play": return <svg {...common}><path d="M7 4l13 8-13 8V4z"/></svg>;
    case "doc": return <svg {...common}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M9 14h6M9 18h4"/></svg>;
    default: return null;
  }
}

function BrandMark({ size = 24, variant = "icon", tone = "indigo" }) {
  // Renders the official VetTime logo PNG.
  // variant: "icon" (square mark) | "wordmark" (full lockup)
  // tone: "indigo" (for light backgrounds) | "white" (for dark)
  const file = `src/assets/logo-${variant}-${tone}.png`;
  const w = variant === "wordmark" ? size * 3.4 : size;
  return (
    <img src={file} width={w} height={size} alt="VetTime" style={{display:"block", height:size, width:"auto"}}/>
  );
}

window.Icon = Icon;
window.BrandMark = BrandMark;