import React from 'react';
import {Loader2} from 'lucide-react';

type PulseLoaderSize = 'sm' | 'md' | 'lg';

interface PulseLoaderProps {
    text?: string;
    size?: PulseLoaderSize;
}

const sizeClasses: Record<PulseLoaderSize, { container: string; icon: string }> = {
    sm: {container: 'py-8', icon: 'w-6 h-6'},
    md: {container: 'h-32', icon: 'w-8 h-8'},
    lg: {container: 'h-64', icon: 'w-10 h-10'},
};

export default function PulseLoader({text, size = 'md'}: PulseLoaderProps): React.JSX.Element {
    const sizeConfig: { container: string; icon: string } = sizeClasses[size];

    return (
        <div className={`flex items-center justify-center ${sizeConfig.container}`}>
            <div className="flex flex-col items-center">
                <Loader2 className={`${sizeConfig.icon} text-primary animate-spin mb-3`} strokeWidth={1.75}/>
                {text && (
                    <p className="text-text-secondary">{text}</p>
                )}
            </div>
        </div>
    );
}