import React, { type ComponentPropsWithRef, forwardRef } from "react";

import { twMerge } from "../../../tailwind.config";
import icons from "./icons";

export interface IconProps
  extends Omit<ComponentPropsWithRef<"svg">, "className"> {
  color?:
    | "secondary"
    | "action"
    | "success"
    | "danger"
    | "main"
    | "white"
    | "current"
    | "warning";
  name: keyof typeof icons;
  size?: "12" | "14" | "16" | "20" | "24" | "28" | "32" | "40";
  weight?: "regular" | "medium" | "semibold" | "bold";
  ESCAPE_className?: string;
}

const colorToClassName = {
  secondary: "text-N100",
  action: "text-B400",
  success: "text-G300",
  danger: "text-R300",
  main: "text-N700",
  white: "text-N0",
  current: "text-current",
  warning: "text-Y300",
};

const sizeToClassName = {
  12: "w-12 h-12",
  14: "w-[14px] h-[14px]",
  16: "w-16 h-16",
  20: "w-20 h-20",
  24: "w-24 h-24",
  28: "w-28 h-28",
  32: "w-32 h-32",
  40: "w-40 h-40",
};

export const Icon = forwardRef<SVGSVGElement, IconProps>(
  (
    {
      color = "current",
      size = "24",
      weight = "regular",
      name,
      ESCAPE_className,
      ...restProps
    },
    ref
  ) => {
    const icon = icons[name];
    if (!icon) {
      return null;
    }

    const IconSvg = icon[weight];

    return (
      <IconSvg
        className={twMerge(
          colorToClassName[color],
          sizeToClassName[size],
          ESCAPE_className
        )}
        ref={ref}
        {...restProps}
      />
    );
  }
);
