/*
  Os ícones próprios do editor de artes (no mesmo traço dos do Lucide: 24 ×
  24, linha de 2, pontas redondas), para o que o Lucide não desenha bem:
  contorno, sombra, fundo do texto, curva, espaçamento, os cantos da linha e
  o separar contorno. Todos aceitam `size` como os do Lucide.
*/

type Props = { size?: number; className?: string };

function Base({ size = 16, className, children, cheio = false }: Props & { children: React.ReactNode; cheio?: boolean }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={cheio ? "currentColor" : "none"} stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
      {children}
    </svg>
  );
}

/** Contorno: a letra só com a linha em volta. */
export function IconeDoContorno(p: Props) {
  return (
    <Base {...p}>
      <path d="M4.5 20 10.2 4h3.6L19.5 20h-3.7l-1.2-3.6H9.4L8.2 20Z" />
      <path d="M10.4 13.2h3.2L12 8.4Z" />
    </Base>
  );
}

/** Sombra: o quadrado com a sombra atrás. */
export function IconeDaSombra(p: Props) {
  return (
    <Base {...p}>
      <rect x="3.5" y="3.5" width="12" height="12" rx="2" />
      <path d="M19.5 8.5v9a2 2 0 0 1-2 2h-9" strokeWidth={3} opacity={0.45} />
    </Base>
  );
}

/** Fundo do texto: a pílula com as linhas do texto. */
export function IconeDoFundoDoTexto(p: Props) {
  return (
    <Base {...p}>
      <rect x="2.5" y="6" width="19" height="12" rx="6" />
      <path d="M8 12h8" />
    </Base>
  );
}

/** Curva do texto: as letras num arco. */
export function IconeDaCurva(p: Props) {
  return (
    <Base {...p}>
      <path d="M3.5 17.5a10 10 0 0 1 17 0" />
      <path d="M6.6 10.6 5.4 9.1M12 7.5V5.6M17.4 10.6l1.2-1.5" />
    </Base>
  );
}

/** Espaçamento: o vão entre duas letras. */
export function IconeDoEspacamento(p: Props) {
  return (
    <Base {...p}>
      <path d="M3 4v16M21 4v16" />
      <path d="M7 12h10M9.5 9.5 7 12l2.5 2.5M14.5 9.5 17 12l-2.5 2.5" />
    </Base>
  );
}

/** Canto vivo: a linha dobra em bico. */
export function IconeDoCantoVivo(p: Props) {
  return (
    <svg width={p.size ?? 16} height={p.size ?? 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={4} strokeLinejoin="miter" strokeMiterlimit={10} strokeLinecap="butt" className={p.className} aria-hidden="true">
      <path d="M4 20 12 5l8 15" />
    </svg>
  );
}

/** Canto redondo: a linha dobra arredondada. */
export function IconeDoCantoRedondo(p: Props) {
  return (
    <svg width={p.size ?? 16} height={p.size ?? 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={4} strokeLinejoin="round" strokeLinecap="round" className={p.className} aria-hidden="true">
      <path d="M4.5 19.5 12 6l7.5 13.5" />
    </svg>
  );
}

/** Separar só a borda: o anel do contorno solto da peça. */
export function IconeDeSepararBorda(p: Props) {
  return (
    <Base {...p}>
      <rect x="3" y="3" width="13" height="13" rx="3" strokeDasharray="2.5 2.5" opacity={0.55} />
      <rect x="8" y="8" width="13" height="13" rx="3" />
    </Base>
  );
}

/** Separar cheio: a silhueta preenchida solta da peça. */
export function IconeDeSepararCheio(p: Props) {
  return (
    <svg width={p.size ?? 16} height={p.size ?? 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className={p.className} aria-hidden="true">
      <rect x="3" y="3" width="13" height="13" rx="3" strokeDasharray="2.5 2.5" opacity={0.55} />
      <rect x="8" y="8" width="13" height="13" rx="3" fill="currentColor" />
    </svg>
  );
}

/** Perspectiva: o plano entortado com a grade. */
export function IconeDaPerspectiva(p: Props) {
  return (
    <Base {...p}>
      <path d="M3 6 21 3v18L3 18Z" />
      <path d="M12 4.5v15" strokeWidth={1.4} />
      <path d="M3 12h18" strokeWidth={1.4} />
    </Base>
  );
}