import { type FC } from "react";

interface LoadingSpinnerProps {
  colorClassName?: string;
  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
  className?: string;
}

export const LoadingSpinner: FC<LoadingSpinnerProps> = ({ 
  size = 24, 
  className = "" ,
  colorClassName = "text-success"
}) => {
  const sizeClasses = {
    16: "h-4 w-4",
    20: "h-5 w-5",
    24: "h-6 w-6",
    28: "h-7 w-7",
    32: "h-8 w-8",
    36: "w-9 h-9", 
    40: "w-10 h-10",
    48: "h-12 w-12"
  };

  return (
    <div className={`flex items-center justify-center ${className}`}>
        <svg viewBox="0 0 32 32" fill="none" strokeWidth="3" 
          className={`z-0 relative overflow-hidden ${colorClassName} animate-spinner-ease-spin ${sizeClasses[size]}`}
        >
            <circle cx="16" cy="16" r="13" role="presentation" 
                strokeDasharray="81.68140899333463 81.68140899333463" 
                strokeDashoffset="0" transform="rotate(-90 16 16)" 
                strokeLinecap="round" 
                className="h-full stroke-default-300/50"></circle>
            <circle cx="16" cy="16" r="13" role="presentation" 
                strokeDasharray="81.68140899333463 81.68140899333463" 
                strokeDashoffset="61.26105674500097" transform="rotate(-90 16 16)" 
                strokeLinecap="round" 
                className="h-full stroke-current transition-all !duration-500"></circle>
        </svg>
    </div>
  );
};