import { forwardRef } from "react";
import clsx from "clsx";

import ArrowNortheast from "@/assets/svg/arrow-northeast.svg";
import ChevronDown from "@/assets/svg/chevron-down.svg";
import Discord from "@/assets/svg/discord.svg";
import Download from "@/assets/svg/download.svg";
import Instagram from "@/assets/svg/instagram.svg";
import Logo from "@/assets/svg/logo.svg";
import LogoLockup from "@/assets/svg/logo-lockup.svg";
import Mute from "@/assets/svg/mute.svg";
import Pause from "@/assets/svg/pause.svg";
import PauseCircle from "@/assets/svg/pause-circle.svg";
import Play from "@/assets/svg/play.svg";
import PlayCircle from "@/assets/svg/play-circle.svg";
import Spinner from "@/assets/svg/spinner.svg";
import Twitter from "@/assets/svg/twitter.svg";
import TwitterX from "@/assets/svg/twitter-x.svg";
import Unmute from "@/assets/svg/unmute.svg";
import Waveform from "@/assets/svg/waveform.svg";
import { useForwardedRef } from "@/hooks";

import styles from "./styles.module.scss";

const ICON_COMPONENTS = {
  arrowNortheast: ArrowNortheast,
  chevronDown: ChevronDown,
  discord: Discord,
  instagram: Instagram,
  spinner: Spinner,
  logo: Logo,
  logoLockup: LogoLockup,
  mute: Mute,
  unmute: Unmute,
  download: Download,
  pause: Pause,
  pauseCircle: PauseCircle,
  play: Play,
  playCircle: PlayCircle,
  twitter: Twitter,
  twitterX: TwitterX,
  waveform: Waveform,
};

export type IconVariant = keyof typeof ICON_COMPONENTS;

interface IconProps {
  variant: IconVariant;
  id?: string;
  className?: string;
  style?: React.CSSProperties;
}

const Icon = forwardRef<SVGSVGElement, IconProps>(
  ({ variant, className, ...props }, ref) => {
    const innerRef = useForwardedRef(ref);

    if (!(variant in ICON_COMPONENTS)) return null;

    const Component = ICON_COMPONENTS[variant];

    return (
      <Component
        ref={innerRef}
        className={clsx(styles.icon, className)}
        {...props}
      />
    );
  },
);
Icon.displayName = "Icon";

export default Icon;