"use client";

import { memo } from "react";
import ExclamationIcon from "./icon/exclamation.svg";

export type IconName = "exclamation";

/** SVG import may be a React component or a module object { default: Component } (e.g. with Turbopack) */
const iconMap: Record<
  IconName,
  | React.ComponentType<React.SVGProps<SVGSVGElement>>
  | { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }
> = {
  exclamation: ExclamationIcon,
};

export interface IconProps {
  name: IconName;
  className?: string;
  /** Width and height (default 24) */
  size?: number;
  "aria-hidden"?: boolean;
}

function IconComponent({
  name,
  className = "",
  size = 24,
  "aria-hidden": ariaHidden = true,
}: IconProps) {
  const SvgModule = iconMap[name];
  if (!SvgModule) return null;
  // Turbopack/bundler may expose SVG as { default: Component } instead of the component directly
  const Svg =
    typeof SvgModule === "object" &&
    SvgModule !== null &&
    "default" in SvgModule
      ? (
          SvgModule as {
            default: React.ComponentType<React.SVGProps<SVGSVGElement>>;
          }
        ).default
      : (SvgModule as React.ComponentType<React.SVGProps<SVGSVGElement>>);
  if (typeof Svg !== "function") return null;
  return (
    <Svg
      width={size}
      height={size}
      className={className}
      aria-hidden={ariaHidden}
    />
  );
}

export default memo(IconComponent);