"use client";

import React from "react";
import * as FluentIcons from "@fluentui/react-icons";
import { IconProps, iconSize } from "./types";
import IconContainer from "./IconContainer";

function Icon({
  color,
  size = "small",
  isActive = true,
  name,
  nestedComponent,
  style,
}: IconProps) {
  const fluentIcons = Object.assign(
    {},
    ...Object.keys(FluentIcons).map((name) => {
      return {
        [name]: (
          <IconContainer
            color={color}
            size={size}
            isActive={isActive}
            nestedComponent={nestedComponent}
            style={style}
          >
            {React.createElement(FluentIcons[name], {
              color: isActive ? color ?? undefined : undefined,
              style: { width: iconSize[size], height: iconSize[size] },
            })}
          </IconContainer>
        ),
      };
    })
  );

  const icon = {
    ...fluentIcons,
  };

  return icon[name];
}

export default Icon;
