// LinkedClean — Category icons (Linear-style filled solid glyphs)
// 8 categories, each as a filled solid shape with internal cutouts,
// sitting in a rounded container. Uses LC ink token for fill.

const CategoryContainer = ({ size = 22, children }) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ flexShrink: 0 }}
    >
      {children}
    </svg>
  );
};

// 1. Patrocinado — Tag (etiqueta com furo) — canon da extensão (icons.js)
function IconPatrocinado(props) {
  return (
    <CategoryContainer {...props}>
      <path d="M20.5 12.5 12.5 20.5a1.5 1.5 0 0 1-2.1 0l-7-7a1 1 0 0 1-.3-.7V4.5A1.5 1.5 0 0 1 4.5 3h8.3a1 1 0 0 1 .7.3l7 7a1.5 1.5 0 0 1 0 2.2Z" />
      <circle cx="7.5" cy="7.5" r="1.1" />
    </CategoryContainer>
  );
}

// 2. Empresa — Prédio com janelas (canon da extensão)
function IconEmpresa(props) {
  return (
    <CategoryContainer {...props}>
      <path d="M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16" />
      <path d="M15 21V11a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v10" />
      <path d="M3 21h18" />
      <path d="M8 8h3M8 12h3M8 16h3" />
    </CategoryContainer>
  );
}

// 3. Vídeo — Retângulo com play (canon da extensão)
function IconVideo(props) {
  return (
    <CategoryContainer {...props}>
      <rect x="3" y="5" width="18" height="14" rx="2.5" />
      <path d="m10.5 9 4.5 3-4.5 3V9Z" />
    </CategoryContainer>
  );
}

// 4. Engagement Bait — Anzol (canon da extensão)
function IconBait(props) {
  return (
    <CategoryContainer {...props}>
      <path d="M17 4v9.5a4.5 4.5 0 1 1-9 0V11" />
      <circle cx="17" cy="3.2" r="0.9" />
    </CategoryContainer>
  );
}

// 5. Política — Megafone (canon da extensão)
function IconPolitica(props) {
  return (
    <CategoryContainer {...props}>
      <path d="M4 10v4a1 1 0 0 0 1 1h2.5l9 4.5a.5.5 0 0 0 .75-.45V4.95a.5.5 0 0 0-.75-.45L7.5 9H5a1 1 0 0 0-1 1Z" />
      <path d="M8 15v3.5a1 1 0 0 0 1 1h1.5a1 1 0 0 0 1-1V17" />
    </CategoryContainer>
  );
}

// 6. AI — Sparkle + plus (Linear AI clients style)
function IconAI(props) {
  return (
    <CategoryContainer {...props}>
      <path d="M11 3c.4 0 .8.3.9.7l1 3.4 3.4 1c.4.1.7.5.7.9 0 .4-.3.8-.7.9l-3.4 1-1 3.4c-.1.4-.5.7-.9.7-.4 0-.8-.3-.9-.7l-1-3.4-3.4-1c-.4-.1-.7-.5-.7-.9 0-.4.3-.8.7-.9l3.4-1 1-3.4c.1-.4.5-.7.9-.7Z" />
      <path d="M18 14a.7.7 0 0 1 .7.5l.4 1.4 1.4.4a.7.7 0 0 1 0 1.4l-1.4.4-.4 1.4a.7.7 0 0 1-1.4 0l-.4-1.4-1.4-.4a.7.7 0 0 1 0-1.4l1.4-.4.4-1.4A.7.7 0 0 1 18 14Z" />
    </CategoryContainer>
  );
}

// 7. Story-time — Speech bubble solid with dots
function IconStoryTime(props) {
  return (
    <CategoryContainer {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-3.4 3.7c-.6.7-1.6.2-1.6-.7V17H6a3 3 0 0 1-3-3V6Zm5 4.5a1.2 1.2 0 1 1 0-2.5 1.2 1.2 0 0 1 0 2.5Zm4 0a1.2 1.2 0 1 1 0-2.5 1.2 1.2 0 0 1 0 2.5Zm4 0a1.2 1.2 0 1 1 0-2.5 1.2 1.2 0 0 1 0 2.5Z"
      />
    </CategoryContainer>
  );
}

// 8. Vagas — Briefcase solid
function IconVagas(props) {
  return (
    <CategoryContainer {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9 3a2 2 0 0 0-2 2v1H4a2 2 0 0 0-2 2v3.5l10 2.5 10-2.5V8a2 2 0 0 0-2-2h-3V5a2 2 0 0 0-2-2H9Zm6 3V5H9v1h6Zm7 7-10 2.5L2 13v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6Z"
      />
    </CategoryContainer>
  );
}

window.IconPatrocinado = IconPatrocinado;
window.IconEmpresa = IconEmpresa;
window.IconVideo = IconVideo;
window.IconBait = IconBait;
window.IconPolitica = IconPolitica;
window.IconAI = IconAI;
window.IconStoryTime = IconStoryTime;
window.IconVagas = IconVagas;

window.LCCategoryIconMap = {
  patrocinado: IconPatrocinado,
  empresa: IconEmpresa,
  video: IconVideo,
  bait: IconBait,
  politica: IconPolitica,
  ai: IconAI,
  storytime: IconStoryTime,
  vagas: IconVagas,
};