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

import Discord from "@/assets/svg/discord.svg";
import Error from "@/assets/svg/error.svg";
import Instagram from "@/assets/svg/instagram.svg";
import Logo from "@/assets/svg/logo.svg";
import LogoApp from "@/assets/svg/logo-app.svg";
import LogoLockup from "@/assets/svg/logo-lockup.svg";
import Mute from "@/assets/svg/mute.svg";
import Pause from "@/assets/svg/pause.svg";
import Play from "@/assets/svg/play.svg";
import Reload from "@/assets/svg/reload.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 = {
  discord: Discord,
  instagram: Instagram,
  logo: Logo,
  logoApp: LogoApp,
  logoLockup: LogoLockup,
  mute: Mute,
  unmute: Unmute,
  pause: Pause,
  play: Play,
  reload: Reload,
  twitter: Twitter,
  twitterX: TwitterX,
  waveform: Waveform,
  error: Error,
};

export type IconVariant = keyof typeof ICON_COMPONENTS;

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

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;