import { useTheme } from "@/hooks/theme/useTheme";
import "./styles.css";
import { useMemo } from "react";

export enum LoaderColor {
  White = "white",
  Black = "black",
  Red = "red",
}

type LoaderProps = {
  color?: LoaderColor;
  className?: string;
};

function Loader({ color = LoaderColor.Black, className }: LoaderProps): JSX.Element {
  const { darkTheme } = useTheme();


  const colorClasses = useMemo(() => ({
    [LoaderColor.White]: "loader__white",
    [LoaderColor.Black]: darkTheme ? "loader__white" : "loader__black",
    [LoaderColor.Red]: "loader__red",
  }), [darkTheme]);

  return (
    <div className={`loader-container ${className}`}>
      <div className={`loader ${colorClasses[color]}`}>
        <span></span>
      </div>
    </div>
  );
}

export default Loader;