const P = { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };

const paths: Record<string, JSX.Element> = {
  agenda: <><rect x="3" y="4" width="18" height="17" rx="2" /><path d="M3 9h18M8 2v4M16 2v4" /></>,
  pacientes: <path d="M7 3c-2.5 0-4 2-4 4.5 0 3 1.2 5 1.8 8 .5 2.5 1 5.5 2.4 5.5 1.6 0 1.5-4.5 4.8-4.5s3.2 4.5 4.8 4.5c1.4 0 1.9-3 2.4-5.5.6-3 1.8-5 1.8-8C21 5 19.5 3 17 3c-2 0-3 1-5 1S9 3 7 3z" />,
  caja: <><rect x="2" y="6" width="20" height="13" rx="2" /><circle cx="12" cy="12.5" r="2.5" /><path d="M6 10v5M18 10v5" /></>,
  membresias: <><rect x="2" y="5" width="20" height="14" rx="2" /><path d="M2 10h20M6 15h4" /></>,
  medico: <><path d="M6 3v6a4 4 0 008 0V3M10 13v3a5 5 0 0010 0v-2" /><circle cx="20" cy="12" r="2" /></>,
  aseguradoras: <><path d="M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z" /><path d="M9 12l2 2 4-4" /></>,
  convenios: <path d="M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1" />,
  consejos: <path d="M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9c.6.4 1 1.1 1 1.8V16h5v-.3c0-.7.4-1.4 1-1.8A6 6 0 0012 3z" />,
  portal: <><path d="M21 12a8 8 0 01-11.6 7.1L4 20l1-4.6A8 8 0 1121 12z" /><path d="M9 11h6M9 14h4" /></>,
  config: <><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" /></>,
};

export function Icon({ name }: { name: keyof typeof paths | string }) {
  return <svg viewBox="0 0 24 24" aria-hidden="true" {...P}>{paths[name]}</svg>;
}