import type { StackIconKind } from "./types";

interface CardIconProps {
  kind: StackIconKind;
}

export function CardIcon(props: CardIconProps) {
  const common = {
    width: 16,
    height: 16,
    viewBox: "0 0 16 16",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "1.25",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    "aria-hidden": true,
  } as const;

  switch (props.kind) {
    case "shield":
      return (
        <svg {...common}>
          <path d="M8 2.2 3.4 4.4v3.2c0 3 2.1 5.1 4.6 6.2 2.5-1.1 4.6-3.2 4.6-6.2V4.4L8 2.2Z" />
          <path d="M6.3 8.1 7.4 9.2 9.9 6.6" />
        </svg>
      );
    case "lock":
      return (
        <svg {...common}>
          <rect x="3" y="7" width="10" height="7" rx="1.6" />
          <path d="M5.8 7V5.4a2.2 2.2 0 0 1 4.4 0V7" />
        </svg>
      );
    case "sync":
      return (
        <svg {...common}>
          <path d="M4 8a4 4 0 0 1 6.8-2.8" />
          <path d="M11 3.6v2.2H8.8" />
          <path d="M12 8a4 4 0 0 1-6.8 2.8" />
          <path d="M5 12.4v-2.2h2.2" />
        </svg>
      );
    case "sun":
      return (
        <svg {...common}>
          <circle cx="8" cy="8" r="2.8" />
          <path d="M8 1.8v1.3M8 12.9v1.3M1.8 8h1.3M12.9 8h1.3M3.6 3.6l.9.9M11.5 11.5l.9.9M12.4 3.6l-.9.9M4.5 11.5l-.9.9" />
        </svg>
      );
    case "keys":
      return (
        <svg {...common}>
          <rect x="2" y="5" width="5" height="4" rx="1" />
          <rect x="9" y="7" width="5" height="4" rx="1" />
          <path d="M7 7h2M7 9h2" />
        </svg>
      );
    case "spark":
      return (
        <svg {...common}>
          <path d="M8 1.8 9.2 6l4.1 1.2-4.1 1.2L8 12.6 6.8 8.4 2.7 7.2 6.8 6 8 1.8Z" />
          <path d="m12 11 .5 1.5L14 13l-1.5.5L12 15l-.5-1.5L10 13l1.5-.5L12 11Z" />
        </svg>
      );
    case "bubble":
      return (
        <svg {...common}>
          <path d="M3 4.2h10a1 1 0 0 1 1 1v5.6a1 1 0 0 1-1 1H6l-3.2 2V5.2a1 1 0 0 1 1-1Z" />
          <path d="M5.5 7h5M5.5 9.2h3.2" />
        </svg>
      );
  }
}