/* eslint-disable react/jsx-props-no-spreading */
import React, { CSSProperties } from "react";

import ArrowDown from "../../assets/icons/arrow-down.svg";
import CircleArrowLeft from "../../assets/icons/circle-arrow-left.svg";
import Close from "../../assets/icons/close.svg";
import Connected from "../../assets/icons/connected.svg";
import Copy from "../../assets/icons/copy.svg";
import Expand from "../../assets/icons/expand.svg";
import ExpandLight from "../../assets/icons/expand-light.svg";
import Failed from "../../assets/icons/failed.svg";
import InfoCircle from "../../assets/icons/information-circle.svg";
import InfoCircleLight from "../../assets/icons/information-circle-light.svg";
import Logo from "../../assets/icons/LOGO.svg";
import Success from "../../assets/icons/success.svg";

interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
  iconName: string;
  iconTitle?: string;
  width?: string;
  height?: string;
  style?: CSSProperties;
}

const icons: Record<string, { image: string }> = {
  "arrow-left": {
    image: CircleArrowLeft,
  },
  close: {
    image: Close,
  },
  "expand-light": {
    image: ExpandLight,
  },
  expand: {
    image: Expand,
  },
  connected: {
    image: Connected,
  },
  "information-circle-light": {
    image: InfoCircleLight,
  },
  "information-circle": {
    image: InfoCircle,
  },
  logo: {
    image: Logo,
  },
  success: {
    image: Success,
  },
  failed: {
    image: Failed,
  },
  "arrow-down": {
    image: ArrowDown,
  },
  copy: {
    image: Copy,
  },
};

export default function Icon(props: IconProps) {
  const { iconName, iconTitle = "", height = "auto", width = "auto", style, ...rest } = props;
  return icons[iconName] ? (
    <img
      {...rest}
      style={style}
      className={iconTitle ? "cursor-pointer" : ""}
      height={height}
      width={width}
      src={icons[iconName].image}
      alt={iconName}
      title={iconTitle}
    />
  ) : null;
}
