import { CURRENT_DIGITAL_VISUAL_THEME } from "@/config/digital/visual-theme.config";
import type { ReactNode } from "react";

export type IconName =
  | "app"
  | "book"
  | "briefcase"
  | "camera"
  | "card"
  | "check"
  | "cloud"
  | "compass"
  | "course"
  | "file"
  | "globe"
  | "home"
  | "map"
  | "music"
  | "phone"
  | "play"
  | "server"
  | "shopping"
  | "spark"
  | "tool"
  | "user"
  | "video"
  | "wallet";

type DigitalThemeIconProps = {
  name: IconName;
  emoji: string;
  className?: string;
  decorative?: boolean;
};

const paths: Record<IconName, ReactNode> = {
  app: (
    <>
      <rect x="7" y="3" width="10" height="18" rx="2" />
      <path d="M10 18h4" />
    </>
  ),
  book: (
    <>
      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
      <path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z" />
      <path d="M8 6h8" />
    </>
  ),
  camera: (
    <>
      <path d="M14.5 5 13 3H9L7.5 5H5a2 2 0 0 0-2 2v12h18V7a2 2 0 0 0-2-2h-4.5z" />
      <circle cx="12" cy="13" r="4" />
    </>
  ),
  card: (
    <>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 10h18" />
      <path d="M7 15h3" />
    </>
  ),
  briefcase: (
    <>
      <path d="M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1" />
      <rect x="3" y="6" width="18" height="15" rx="2" />
      <path d="M3 12h18" />
    </>
  ),
  check: (
    <>
      <path d="M20 6 9 17l-5-5" />
    </>
  ),
  cloud: (
    <>
      <path d="M17.5 19H7a5 5 0 1 1 1.2-9.85A6.5 6.5 0 0 1 20 12.5 3.5 3.5 0 0 1 17.5 19z" />
    </>
  ),
  compass: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="m15.5 8.5-2 5-5 2 2-5 5-2z" />
    </>
  ),
  course: (
    <>
      <path d="m3 7 9-4 9 4-9 4-9-4z" />
      <path d="M21 10v6" />
      <path d="M7 10.5V16c0 1.7 2.7 3 5 3s5-1.3 5-3v-5.5" />
    </>
  ),
  file: (
    <>
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <path d="M14 2v6h6" />
      <path d="M8 13h8" />
      <path d="M8 17h6" />
    </>
  ),
  globe: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18" />
      <path d="M12 3a13 13 0 0 1 0 18" />
      <path d="M12 3a13 13 0 0 0 0 18" />
    </>
  ),
  home: (
    <>
      <path d="m3 11 9-8 9 8" />
      <path d="M5 10v10h14V10" />
      <path d="M9 20v-6h6v6" />
    </>
  ),
  map: (
    <>
      <path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6z" />
      <path d="M9 3v15" />
      <path d="M15 6v15" />
    </>
  ),
  music: (
    <>
      <path d="M9 18V5l12-2v13" />
      <circle cx="6" cy="18" r="3" />
      <circle cx="18" cy="16" r="3" />
    </>
  ),
  phone: (
    <>
      <rect x="7" y="3" width="10" height="18" rx="2" />
      <path d="M11 18h2" />
    </>
  ),
  play: (
    <>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m10 9 5 3-5 3V9z" />
    </>
  ),
  server: (
    <>
      <rect x="4" y="4" width="16" height="7" rx="2" />
      <rect x="4" y="13" width="16" height="7" rx="2" />
      <path d="M8 8h.01" />
      <path d="M8 17h.01" />
    </>
  ),
  shopping: (
    <>
      <path d="M6 7h15l-2 8H8L6 3H3" />
      <circle cx="9" cy="20" r="1" />
      <circle cx="18" cy="20" r="1" />
    </>
  ),
  spark: (
    <>
      <path d="M12 2v6" />
      <path d="M12 16v6" />
      <path d="M4.93 4.93 9.17 9.17" />
      <path d="m14.83 14.83 4.24 4.24" />
      <path d="M2 12h6" />
      <path d="M16 12h6" />
      <path d="m4.93 19.07 4.24-4.24" />
      <path d="m14.83 9.17 4.24-4.24" />
    </>
  ),
  tool: (
    <>
      <path d="M14.7 6.3a4 4 0 0 0-5.2 5.2L3 18l3 3 6.5-6.5a4 4 0 0 0 5.2-5.2l-2.8 2.8-2.1-2.1 2.9-2.7z" />
    </>
  ),
  user: (
    <>
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21a8 8 0 0 1 16 0" />
    </>
  ),
  video: (
    <>
      <rect x="3" y="6" width="14" height="12" rx="2" />
      <path d="m17 10 4-2v8l-4-2" />
    </>
  ),
  wallet: (
    <>
      <path d="M4 7h16a1 1 0 0 1 1 1v12H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14" />
      <path d="M16 13h2" />
    </>
  ),
};

export default function DigitalThemeIcon({
  name,
  emoji,
  className = "",
  decorative = true,
}: DigitalThemeIconProps) {
  if (CURRENT_DIGITAL_VISUAL_THEME === "theme1") {
    return (
      <span className={className} aria-hidden={decorative}>
        {emoji}
      </span>
    );
  }

  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.9"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden={decorative}
    >
      {paths[name]}
    </svg>
  );
}