type Props = { slug: string; className?: string };

export function RegionIcon({ slug, className }: Props) {
  const common = {
    viewBox: "0 0 24 24",
    fill: "none" as const,
    stroke: "currentColor",
    strokeWidth: 1.75,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    className: className ?? "h-6 w-6",
  };

  switch (slug) {
    case "knee":
      return (
        <svg {...common}>
          <path d="M9 3v6l-3 4v8" />
          <path d="M15 3v6l3 4v8" />
          <path d="M6 13h12" />
          <circle cx="12" cy="13" r="2" />
        </svg>
      );
    case "hip":
      return (
        <svg {...common}>
          <circle cx="8" cy="9" r="3" />
          <circle cx="16" cy="9" r="3" />
          <path d="M5 12v9M19 12v9M8 12h8" />
        </svg>
      );
    case "shoulder":
      return (
        <svg {...common}>
          <circle cx="12" cy="8" r="4" />
          <path d="M4 20c1-5 4-8 8-8s7 3 8 8" />
        </svg>
      );
    case "spine":
      return (
        <svg {...common}>
          <path d="M12 3v18" />
          <path d="M9 5h6M9 9h6M9 13h6M9 17h6M9 21h6" />
        </svg>
      );
    case "foot-ankle":
      return (
        <svg {...common}>
          <path d="M7 20c0-3 1-5 3-6 3-1 4-3 4-5 0-2 1-4 3-4 2 0 3 2 3 4 0 5-3 11-8 11-3 0-5-1-5-3" />
          <circle cx="6" cy="9" r="1" />
          <circle cx="8" cy="7" r="1" />
          <circle cx="10" cy="6" r="1" />
        </svg>
      );
    case "hand-wrist":
      return (
        <svg {...common}>
          <path d="M7 12V6a1.5 1.5 0 0 1 3 0v5" />
          <path d="M10 11V4a1.5 1.5 0 0 1 3 0v7" />
          <path d="M13 11V5a1.5 1.5 0 0 1 3 0v7" />
          <path d="M16 11V7a1.5 1.5 0 0 1 3 0v8a6 6 0 0 1-6 6H9a4 4 0 0 1-4-4v-3l2-3" />
        </svg>
      );
    case "elbow":
      return (
        <svg {...common}>
          <path d="M4 4l7 7-4 4 9 9" />
          <circle cx="11" cy="11" r="2" />
        </svg>
      );
    default:
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
        </svg>
      );
  }
}
