/* global React */
// Inline SVG icon library. All icons accept size + color via currentColor.

const Icon = ({ d, size = 14, stroke = 1.6, fill = "none", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
       stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
       style={style} aria-hidden="true">
    {d}
  </svg>
);

const IconPipeline = (p) => <Icon {...p} d={<>
  <rect x="3" y="4" width="5" height="16" rx="1.2"/>
  <rect x="10" y="4" width="5" height="11" rx="1.2"/>
  <rect x="17" y="4" width="4" height="7" rx="1.2"/>
</>}/>;
const IconTable = (p) => <Icon {...p} d={<>
  <rect x="3" y="4" width="18" height="16" rx="1.5"/>
  <path d="M3 9h18M3 14h18M9 4v16"/>
</>}/>;
const IconChart = (p) => <Icon {...p} d={<>
  <path d="M4 19V5M4 19h16"/>
  <path d="M8 15v-3M12 15V9M16 15v-5"/>
</>}/>;
const IconPlug = (p) => <Icon {...p} d={<>
  <path d="M9 2v4M15 2v4"/>
  <path d="M7 6h10v4a5 5 0 0 1-10 0V6Z"/>
  <path d="M12 15v6"/>
</>}/>;
const IconSearch = (p) => <Icon {...p} d={<>
  <circle cx="11" cy="11" r="6"/>
  <path d="m20 20-4.3-4.3"/>
</>}/>;
const IconClose = (p) => <Icon {...p} d={<>
  <path d="M6 6l12 12M18 6L6 18"/>
</>}/>;
const IconChevR = (p) => <Icon {...p} d={<>
  <path d="m9 5 7 7-7 7"/>
</>}/>;
const IconChevD = (p) => <Icon {...p} d={<>
  <path d="m5 9 7 7 7-7"/>
</>}/>;
const IconPlus = (p) => <Icon {...p} d={<>
  <path d="M12 5v14M5 12h14"/>
</>}/>;
const IconFilter = (p) => <Icon {...p} d={<>
  <path d="M4 5h16l-6 8v5l-4 2v-7L4 5Z"/>
</>}/>;
const IconBell = (p) => <Icon {...p} d={<>
  <path d="M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z"/>
  <path d="M10 19a2 2 0 0 0 4 0"/>
</>}/>;
const IconCheck = (p) => <Icon {...p} d={<>
  <path d="m4 12 5 5L20 6"/>
</>}/>;
const IconStar = (p) => <Icon {...p} fill="currentColor" stroke="none" d={<>
  <path d="m12 2 2.9 6.6 7.1.8-5.4 4.9 1.6 7-6.2-3.6L5.8 21.3l1.6-7L2 9.4l7.1-.8L12 2Z"/>
</>}/>;
const IconGrip = (p) => <Icon {...p} fill="currentColor" stroke="none" d={<>
  <circle cx="9" cy="6" r="1.3"/><circle cx="15" cy="6" r="1.3"/>
  <circle cx="9" cy="12" r="1.3"/><circle cx="15" cy="12" r="1.3"/>
  <circle cx="9" cy="18" r="1.3"/><circle cx="15" cy="18" r="1.3"/>
</>}/>;
const IconMore = (p) => <Icon {...p} fill="currentColor" stroke="none" d={<>
  <circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/>
</>}/>;
const IconExt = (p) => <Icon {...p} d={<>
  <path d="M14 5h5v5"/><path d="M19 5l-8 8"/>
  <path d="M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/>
</>}/>;
const IconArchive = (p) => <Icon {...p} d={<>
  <rect x="3" y="4" width="18" height="4" rx="1"/>
  <path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/>
  <path d="M10 13h4"/>
</>}/>;
const IconCommand = (p) => <Icon {...p} d={<>
  <path d="M6 18a2 2 0 1 0 0-4h12a2 2 0 1 1 0 4 2 2 0 0 1-2-2V8a2 2 0 1 1 2-2 2 2 0 0 1-2 2H8a2 2 0 1 1-2-2 2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z"/>
</>}/>;
const IconRefresh = (p) => <Icon {...p} d={<>
  <path d="M4 12a8 8 0 0 1 14-5.3L20 9"/>
  <path d="M20 4v5h-5"/>
  <path d="M20 12a8 8 0 0 1-14 5.3L4 15"/>
  <path d="M4 20v-5h5"/>
</>}/>;
const IconInbox = (p) => <Icon {...p} d={<>
  <path d="M3 13l3-8h12l3 8"/>
  <path d="M3 13v6a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-6"/>
  <path d="M3 13h5l2 3h4l2-3h5"/>
</>}/>;
const IconCalendar = (p) => <Icon {...p} d={<>
  <rect x="3" y="5" width="18" height="16" rx="1.5"/>
  <path d="M3 9h18M8 3v4M16 3v4"/>
</>}/>;
const IconLink = (p) => <Icon {...p} d={<>
  <path d="M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 0 0-5.6-5.6l-1 1"/>
  <path d="M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 0 0 5.6 5.6l1-1"/>
</>}/>;
const IconBolt = (p) => <Icon {...p} fill="currentColor" stroke="none" d={<>
  <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8Z"/>
</>}/>;
const IconMeta = (p) => <Icon {...p} fill="currentColor" stroke="none" d={<>
  <path d="M12 4c-2.5 0-4 2.2-5.7 5.3C8 8 9.2 7.4 10.5 7.4c2.4 0 4 2.2 5.5 5.1.7 1.4 1.6 3.4 2.7 4.5.7.7 1.7 1.2 2.8 1.2-1.2 1.4-2.9 1.8-4.1 1.8-2.5 0-4-2.2-5.7-5.3C10.5 16 9.3 16.5 8 16.5c-2.6 0-4.5-2.3-4.5-5.5C3.5 7.8 6.5 4 12 4Z"/>
</>}/>;
const IconCircle = (p) => <Icon {...p} d={<>
  <circle cx="12" cy="12" r="9"/>
</>}/>;
const IconPlay = (p) => <Icon {...p} fill="currentColor" stroke="none" d={<>
  <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.6"/>
  <path d="M10 8.5v7l5.5-3.5L10 8.5Z" fill="currentColor"/>
</>}/>;
const IconStack = (p) => <Icon {...p} d={<>
  <rect x="3" y="3" width="14" height="14" rx="1.5"/>
  <path d="M21 7v12a2 2 0 0 1-2 2H7"/>
</>}/>;
const IconSidebar = (p) => <Icon {...p} d={<>
  <rect x="3" y="4" width="18" height="16" rx="1.5"/>
  <path d="M9 4v16"/>
  <path d="M5.5 9h1.5M5.5 12h1.5M5.5 15h1.5"/>
</>}/>;
const IconMenu = (p) => <Icon {...p} d={<>
  <path d="M4 7h16M4 12h16M4 17h16"/>
</>}/>;
const IconBack = (p) => <Icon {...p} d={<>
  <path d="m15 5-7 7 7 7"/>
</>}/>;
const IconChat = (p) => <Icon {...p} d={<>
  <path d="M21 11a8 8 0 1 1-3.3-6.5L21 4v7Z"/>
</>}/>;
const IconUser = (p) => <Icon {...p} d={<>
  <circle cx="12" cy="8" r="4"/>
  <path d="M4 21a8 8 0 0 1 16 0"/>
</>}/>;
const IconUsers = (p) => <Icon {...p} d={<>
  <circle cx="9" cy="8" r="3.4"/>
  <path d="M2.5 20a6.5 6.5 0 0 1 13 0"/>
  <path d="M16 5.2a3.4 3.4 0 0 1 0 6.6"/>
  <path d="M17.5 14.2A6.5 6.5 0 0 1 21.5 20"/>
</>}/>;
const IconLogout = (p) => <Icon {...p} d={<>
  <path d="M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4"/>
  <path d="M10 8l-4 4 4 4"/>
  <path d="M6 12h11"/>
</>}/>;
const IconLock = (p) => <Icon {...p} d={<>
  <rect x="4" y="10" width="16" height="11" rx="2"/>
  <path d="M8 10V7a4 4 0 0 1 8 0v3"/>
</>}/>;
const IconMail = (p) => <Icon {...p} d={<>
  <rect x="3" y="5" width="18" height="14" rx="2"/>
  <path d="m3 7 9 6 9-6"/>
</>}/>;
const IconPhone = (p) => <Icon {...p} d={<>
  <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/>
</>}/>;
const IconPin = (p) => <Icon {...p} d={<>
  <path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11Z"/>
  <circle cx="12" cy="10" r="2.5"/>
</>}/>;
const IconClock = (p) => <Icon {...p} d={<>
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 7v5l3 2"/>
</>}/>;
const IconVideo = (p) => <Icon {...p} d={<>
  <rect x="3" y="6" width="13" height="12" rx="2"/>
  <path d="m16 10 5-3v10l-5-3"/>
</>}/>;
const IconTag = (p) => <Icon {...p} d={<>
  <path d="M3 11V4a1 1 0 0 1 1-1h7l9 9-8 8-9-9Z"/>
  <circle cx="7.5" cy="7.5" r="1.4"/>
</>}/>;
const IconGlobe = (p) => <Icon {...p} d={<>
  <circle cx="12" cy="12" r="9"/>
  <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
</>}/>;
const IconBuilding = (p) => <Icon {...p} d={<>
  <rect x="5" y="3" width="14" height="18" rx="1.5"/>
  <path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/>
</>}/>;

// Pick origin icon
const OriginIcon = ({ origin, size = 11 }) => {
  if (origin === "historia") return <IconCircle size={size} stroke={1.8}/>;
  if (origin === "reel")     return <IconPlay   size={size}/>;
  if (origin === "carrusel") return <IconStack  size={size} stroke={1.8}/>;
  return <IconChat size={size} stroke={1.8}/>;
};

Object.assign(window, {
  IconPipeline, IconTable, IconChart, IconPlug,
  IconSearch, IconClose, IconChevR, IconChevD, IconPlus, IconFilter, IconBell,
  IconCheck, IconStar, IconGrip, IconMore, IconExt, IconArchive, IconCommand,
  IconRefresh, IconInbox, IconCalendar, IconLink, IconBolt, IconMeta,
  IconCircle, IconPlay, IconStack, IconChat, IconSidebar, IconMenu, IconBack,
  IconUser, IconUsers, IconLogout, IconLock, IconMail, IconPhone, IconPin,
  IconClock, IconVideo, IconTag, IconGlobe, IconBuilding,
  OriginIcon,
});