import { ReactNode } from "react";

interface SpinnerProps {
  size?: "sm" | "md" | "lg";
  color?: "primary" | "success" | "error" | "warning" | "info";
  className?: string;
}

export const Spinner: React.FC<SpinnerProps> = ({
  size = "md",
  color = "primary",
  className = "",
}) => {
  const sizeClasses = {
    sm: "h-6 w-6 border-2",
    md: "h-10 w-10 border-4",
    lg: "h-16 w-16 border-4",
  };

  const colorClasses = {
    primary: "border-gray-200 border-t-brand-500",
    success: "border-success-200 border-t-success-500",
    error: "border-error-200 border-t-error-500",
    warning: "border-warning-200 border-t-warning-500",
    info: "border-blue-light-200 border-t-blue-light-500",
  };

  return (
    <div
      className={`inline-flex animate-spin items-center justify-center rounded-full ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
      role="status"
      aria-label="Loading"
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
};

