import type { SVGProps } from "react";

type IconName =
  | "eye"
  | "spark"
  | "shield"
  | "leaf"
  | "heart"
  | "moon"
  | "book"
  | "link"
  | "arrow"
  | "phone"
  | "pin"
  | "mail"
  | "facebook";

export function Icon({
  name,
  ...props
}: SVGProps<SVGSVGElement> & { name: IconName }) {
  const common = {
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.8,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
  };

  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props} {...common}>
      {name === "eye" && (
        <>
          <path d="M2.4 12s3.5-6 9.6-6 9.6 6 9.6 6-3.5 6-9.6 6-9.6-6-9.6-6Z" />
          <circle cx="12" cy="12" r="2.8" />
        </>
      )}
      {name === "spark" && (
        <>
          <path d="m12 2 1.4 5.1L18 9l-4.6 1.9L12 16l-1.4-5.1L6 9l4.6-1.9L12 2Z" />
          <path d="m19 15 .7 2.3L22 18l-2.3.7L19 21l-.7-2.3L16 18l2.3-.7L19 15Z" />
        </>
      )}
      {name === "shield" && (
        <>
          <path d="M12 2.5 20 6v5.2c0 5-3.4 8.5-8 10.3-4.6-1.8-8-5.3-8-10.3V6l8-3.5Z" />
          <path d="m8.5 12 2.2 2.2 4.8-5" />
        </>
      )}
      {name === "leaf" && (
        <>
          <path d="M20.7 3.4C11.5 3 5.2 6.9 5.2 13.1c0 3.7 2.9 6.4 6.4 5.5 5.7-1.4 7.9-7.9 9.1-15.2Z" />
          <path d="M3.2 21c2.8-5.6 6.4-8.8 11.9-11.7" />
        </>
      )}
      {name === "heart" && (
        <path d="M20.8 5.8a5.4 5.4 0 0 0-7.6 0L12 7l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 22l8.8-8.6a5.4 5.4 0 0 0 0-7.6Z" />
      )}
      {name === "moon" && (
        <path d="M20.5 15.8A9 9 0 0 1 8.2 3.5 9 9 0 1 0 20.5 15.8Z" />
      )}
      {name === "book" && (
        <>
          <path d="M3 4.5c3.7-.7 6.7.1 9 2.4v13c-2.3-2.3-5.3-3.1-9-2.4v-13Z" />
          <path d="M21 4.5c-3.7-.7-6.7.1-9 2.4v13c2.3-2.3 5.3-3.1 9-2.4v-13Z" />
        </>
      )}
      {name === "link" && (
        <>
          <path d="m9.5 14.5 5-5" />
          <path d="M7.4 16.6 5.8 18.2a3 3 0 0 1-4.2-4.2l3.2-3.2A3 3 0 0 1 9 10.7" />
          <path d="m16.6 7.4 1.6-1.6a3 3 0 1 1 4.2 4.2l-3.2 3.2a3 3 0 0 1-4.2.1" />
        </>
      )}
      {name === "arrow" && (
        <>
          <path d="M5 12h14" />
          <path d="m14 7 5 5-5 5" />
        </>
      )}
      {name === "phone" && (
        <path d="M8.4 3.5 10 7.4 7.7 9a14 14 0 0 0 7.3 7.3l1.6-2.3 3.9 1.6v3a2 2 0 0 1-2.2 2C10.4 19.6 4.4 13.6 3.4 5.7a2 2 0 0 1 2-2.2h3Z" />
      )}
      {name === "pin" && (
        <>
          <path d="M20 10c0 5.4-8 12-8 12S4 15.4 4 10a8 8 0 1 1 16 0Z" />
          <circle cx="12" cy="10" r="2.5" />
        </>
      )}
      {name === "mail" && (
        <>
          <rect x="2.5" y="4.5" width="19" height="15" rx="2" />
          <path d="m3.5 6 8.5 7 8.5-7" />
        </>
      )}
      {name === "facebook" && (
        <path d="M14 21v-8h3l.5-3H14V8.2c0-.9.3-1.7 1.8-1.7H18V3.8c-.4-.1-1.7-.2-3-.2-3 0-5 1.8-5 5.1V10H7v3h3v8" />
      )}
    </svg>
  );
}