import { cn } from '../../lib/utils';

interface SpinnerProps {
    className?: string;
    size?: 'sm' | 'md' | 'lg';
}

const sizeClasses = {
    sm: 'h-4 w-4 border-2',
    md: 'h-8 w-8 border-2',
    lg: 'h-12 w-12 border-3',
};

export function Spinner({ className, size = 'md' }: SpinnerProps) {
    return (
        <div
            className={cn(
                'inline-block animate-spin rounded-full border-brand border-t-transparent',
                sizeClasses[size],
                className
            )}
            role="status"
            aria-label="Loading"
        >
            <span className="sr-only">Loading...</span>
        </div>
    );
}

export function LoadingOverlay({ message = 'Loading...' }: { message?: string }) {
    return (
        <div className="flex min-h-[400px] flex-col items-center justify-center">
            <Spinner size="lg" />
            <p className="mt-4 text-sm text-slate-500">{message}</p>
        </div>
    );
}

export function ButtonSpinner() {
    return <Spinner size="sm" className="mr-2" />;
}