// Set de iconos propio de Gustito Xpress.
//
// Por que no emojis: el emoji lo dibuja el sistema operativo, asi que cada
// telefono pinta uno distinto, no toma el color de la marca, y en los Android
// de gama baja que usan nuestros clientes salen como cuadritos (ya paso en
// Cocina y Pedidos). Ademas un tablero lleno de emojis lee a plantilla.
//
// Todos comparten la misma reja de 24, trazo redondeado y usan currentColor,
// asi que heredan el color del contenedor (incluido el de la marca del negocio).

export type NombreIcono =
  | 'plato'
  | 'pin'
  | 'pregunta'
  | 'recibo'
  | 'candado'
  | 'enlace'
  | 'cubiertos'
  | 'check'
  | 'tarjeta'
  | 'camara'
  | 'moto'
  | 'reloj'
  | 'cocina'
  | 'chispa'
  | 'cerrar'
  | 'campana'
  | 'mas'
  | 'buscar'
  | 'bolsa'
  | 'billete'
  | 'lista'
  | 'carrito';

// Cada entrada es el contenido del <svg>, en trazo, sobre viewBox 0 0 24 24.
const TRAZOS: Record<NombreIcono, JSX.Element> = {
  // Campana de servir. Dos circulos concentricos (lo obvio para "plato") se
  // leen como una diana; esta forma se reconoce como comida servida.
  plato: (
    <>
      <path d="M4.5 17a7.5 7.5 0 0 1 15 0" />
      <path d="M2.5 17h19" />
      <path d="M12 9.5V8" />
    </>
  ),
  pin: (
    <>
      <path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z" />
      <circle cx="12" cy="10" r="2.5" />
    </>
  ),
  pregunta: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M9.3 9.4a2.8 2.8 0 1 1 4 2.6c-.9.4-1.4 1.2-1.4 2.1" />
      <path d="M12 17.3h.01" />
    </>
  ),
  recibo: (
    <>
      <path d="M6 3h12v18l-2.4-1.5L13.2 21l-2.4-1.5L8.4 21 6 19.5V3z" />
      <path d="M9.2 8h5.6M9.2 12h5.6" />
    </>
  ),
  candado: (
    <>
      <rect x="4.5" y="10.5" width="15" height="9.5" rx="2.2" />
      <path d="M8 10.5V7.8a4 4 0 0 1 8 0v2.7" />
    </>
  ),
  enlace: (
    <>
      <path d="M10.3 13.7a3.6 3.6 0 0 0 5.1 0l2.5-2.5a3.6 3.6 0 0 0-5.1-5.1l-1.1 1.1" />
      <path d="M13.7 10.3a3.6 3.6 0 0 0-5.1 0l-2.5 2.5a3.6 3.6 0 0 0 5.1 5.1l1.1-1.1" />
    </>
  ),
  cubiertos: (
    <>
      <path d="M7 3v5.5a2 2 0 0 0 2 2v10.5" />
      <path d="M11 3v5.5a2 2 0 0 1-2 2" />
      <path d="M16.5 3c1.8 1.8 1.8 6.2 0 8v10" />
    </>
  ),
  check: <path d="M4.5 12.5l5 5 10-11" />,
  tarjeta: (
    <>
      <rect x="2.5" y="5" width="19" height="14" rx="2.4" />
      <path d="M2.5 10h19M6 15h3.5" />
    </>
  ),
  camara: (
    <>
      <path d="M3.5 8.5h3L8 6.2h8l1.5 2.3h3a1 1 0 0 1 1 1v8.3a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V9.5a1 1 0 0 1 1-1z" />
      <circle cx="12" cy="13.6" r="3.2" />
    </>
  ),
  moto: (
    <>
      <circle cx="5.3" cy="16.8" r="3.4" />
      <circle cx="18.7" cy="16.8" r="3.4" />
      <path d="M5.3 16.8l3.4-5.3h5.1" />
      <path d="M13.8 11.5l4.9 5.3" />
      <path d="M15.2 7.4h2.6l1.9 5.6" />
      <path d="M8.7 11.5h3.6" />
    </>
  ),
  reloj: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 6.8V12l3.4 2" />
    </>
  ),
  // Sarten de lado. El gorro de chef, a 18px, se lee como una nube.
  cocina: (
    <>
      <path d="M2.5 11h11.6a1 1 0 0 1 1 1v1.4a6.1 6.1 0 0 1-6.1 6.1H7.6a6.1 6.1 0 0 1-6.1-6.1V12a1 1 0 0 1 1-1z" />
      <path d="M15.1 12.4l5.4-2.9" />
      <path d="M6.5 7.6c0-1.2 1.2-1.2 1.2-2.4M10 7.6c0-1.2 1.2-1.2 1.2-2.4" />
    </>
  ),
  chispa: <path d="M12 3.2l1.9 5.4 5.4 1.9-5.4 1.9-1.9 5.4-1.9-5.4-5.4-1.9 5.4-1.9L12 3.2z" />,
  cerrar: <path d="M6.5 6.5l11 11M17.5 6.5l-11 11" />,
  campana: (
    <>
      <path d="M6 16.4v-4.9a6 6 0 1 1 12 0v4.9l1.4 2.3H4.6L6 16.4z" />
      <path d="M10 19.6a2 2 0 0 0 4 0" />
    </>
  ),
  mas: <path d="M12 5.5v13M5.5 12h13" />,
  buscar: (
    <>
      <circle cx="11" cy="11" r="6.8" />
      <path d="M16 16l4.5 4.5" />
    </>
  ),
  bolsa: (
    <>
      <path d="M5.8 7.8h12.4l-1 12.2H6.8l-1-12.2z" />
      <path d="M9.2 7.8V6a2.8 2.8 0 0 1 5.6 0v1.8" />
    </>
  ),
  billete: (
    <>
      <rect x="2.5" y="6" width="19" height="12" rx="2.2" />
      <circle cx="12" cy="12" r="2.8" />
      <path d="M6 12h.01M18 12h.01" />
    </>
  ),
  lista: (
    <>
      <path d="M8.5 4.5H7A1.5 1.5 0 0 0 5.5 6v13A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V6A1.5 1.5 0 0 0 17 4.5h-1.5" />
      <rect x="8.5" y="2.8" width="7" height="3.4" rx="1.2" />
      <path d="M9 11.5h6M9 15.5h4" />
    </>
  ),
  carrito: (
    <>
      <path d="M2.8 4h2.1l2.3 10.2h9.5l1.9-7.6H6" />
      <circle cx="9.2" cy="18.8" r="1.4" />
      <circle cx="16.6" cy="18.8" r="1.4" />
    </>
  ),
};

export function Icono({
  nombre,
  className = 'h-5 w-5',
  grosor = 1.7,
  estilo,
}: {
  nombre: NombreIcono;
  className?: string;
  grosor?: number;
  // Solo para pantallas que pintan sin Tailwind (ver ErrorBoundary).
  estilo?: { width: number; height: number };
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      className={className}
      style={estilo}
      fill="none"
      stroke="currentColor"
      strokeWidth={grosor}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {TRAZOS[nombre]}
    </svg>
  );
}

// Glifo de la marca (plato + cubiertos). Es la firma de Gustito Xpress, va
// relleno y no en trazo: se usa en el logo y como respaldo cuando un negocio
// todavia no cargo su logo. Definido UNA sola vez para las tres apps.
// Acepta `estilo` ademas de clases porque el ErrorBoundary pinta con estilos
// en linea a proposito: es la pantalla que debe verse aunque el CSS no cargue.
export function GlifoMarca({
  className = 'h-7 w-7',
  estilo,
}: {
  className?: string;
  estilo?: { width: number; height: number };
}) {
  return (
    <svg viewBox="0 0 512 512" className={className} style={estilo} aria-hidden>
      <circle cx="256" cy="256" r="150" fill="none" stroke="currentColor" strokeWidth="34" />
      <g fill="currentColor" transform="rotate(-32 256 256)">
        <rect x="245" y="214" width="22" height="150" rx="11" />
        <rect x="236" y="152" width="8" height="66" rx="4" />
        <rect x="252" y="152" width="8" height="66" rx="4" />
        <rect x="268" y="152" width="8" height="66" rx="4" />
        <rect x="236" y="208" width="40" height="14" rx="7" />
      </g>
      <g fill="currentColor" transform="rotate(32 256 256)">
        <rect x="245" y="202" width="22" height="162" rx="11" />
        <ellipse cx="256" cy="174" rx="27" ry="38" />
      </g>
    </svg>
  );
}