import type { JSXElementConstructor } from "react";
import React from "react";
import type { IconProps } from "constants/IconConstants";
import { IconWrapper } from "constants/IconConstants";
import { importSvg } from "design-system-old";

const InfoIcon = importSvg(() => import("assets/icons/alert/info.svg"));
const SuccessIcon = importSvg(() => import("assets/icons/alert/success.svg"));
const ErrorIcon = importSvg(() => import("assets/icons/alert/error.svg"));
const WarningIcon = importSvg(() => import("assets/icons/alert/warning.svg"));

/* eslint-disable react/display-name */

export const AlertIcons: {
  [id: string]: JSXElementConstructor<IconProps>;
} = {
  INFO: (props: IconProps) => (
    <IconWrapper {...props}>
      <InfoIcon />
    </IconWrapper>
  ),
  SUCCESS: (props: IconProps) => (
    <IconWrapper {...props}>
      <SuccessIcon />
    </IconWrapper>
  ),
  ERROR: (props: IconProps) => (
    <IconWrapper {...props}>
      <ErrorIcon />
    </IconWrapper>
  ),
  WARNING: (props: IconProps) => (
    <IconWrapper {...props}>
      <WarningIcon />
    </IconWrapper>
  ),
};

export type AlertIconName = keyof typeof AlertIcons;
