type SpinnerSize = "sm" | "md" | "lg";

interface SpinnerProps {
  size?: SpinnerSize;
  className?: string;
}

const sizePx: Record<SpinnerSize, number> = {
  sm: 16,
  md: 24,
  lg: 40,
};

const borderWidth: Record<SpinnerSize, number> = {
  sm: 2,
  md: 3,
  lg: 4,
};

export function Spinner({ size = "md", className = "" }: SpinnerProps) {
  const px = sizePx[size];
  const bw = borderWidth[size];

  return (
    <span
      role="status"
      aria-label="Loading"
      className={`inline-block animate-spin rounded-full ${className}`}
      style={{
        width: px,
        height: px,
        border: `${bw}px solid rgba(63,63,70,0.6)`,
        borderTopColor: "#39FF14",
      }}
    />
  );
}