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

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

export interface SpinnerProps {
  size?: number | string;
  color?: string;
  thickness?: number;
  className?: string;
  style?: CSSProperties;
}

export default function Spinner({
  size = 28,
  color = "currentColor",
  thickness = 3,
  className,
  style,
}: SpinnerProps) {
  const resolvedSize = typeof size === "number" ? `${size}px` : size;

  return (
    <span
      className={clsx(styles.spinner, className)}
      style={
        {
          "--spinner-size": resolvedSize,
          "--spinner-color": color,
          "--spinner-thickness": `${thickness}px`,
          ...style,
        } as CSSProperties
      }
    />
  );
}
