interface LoaderProps {
    theme?: 'primary' | 'secondary';
    size?: 'small' | 'medium' | 'large';
}

const Loader = ({ theme = 'primary', size = 'medium' }: LoaderProps) => {
    const themeClasses = theme === 'primary'
    ? 'border-light-600 border-t-primary-500'
    : 'border-primary-500 border-t-light-600';

    const sizeClasses = size === 'small'
    ? 'w-7 h-7 border-2'
    : size === 'large'
    ? 'w-28 h-28 border-8'
    : 'w-14 h-14 border-4';

    return (
        <div className="flex-col gap-4 w-full flex items-center justify-center">
            <div className={`${sizeClasses} animate-spin flex items-center justify-center rounded-full ${themeClasses} ${sizeClasses}`} role="status">
            </div>
        </div>
    )
}

export default Loader