import { useEffect, useState } from 'react';

interface TerminalSpinnerProps {
    text?: string;
    size?: 'sm' | 'md' | 'lg';
    fullScreen?: boolean;
}

export default function TerminalSpinner({ 
    text = 'LOADING', 
    size = 'md',
    fullScreen = false 
}: TerminalSpinnerProps) {
    const [dots, setDots] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setDots(prev => (prev + 1) % 4);
        }, 500);
        
        return () => clearInterval(interval);
    }, []);

    const getDots = () => {
        switch (dots) {
            case 0: return '   ';
            case 1: return '.  ';
            case 2: return '.. ';
            case 3: return '...';
            default: return '   ';
        }
    };

    const sizeClasses = {
        sm: 'text-sm',
        md: 'text-lg',
        lg: 'text-xl'
    };

    const spinner = (
        <div className="border border-red-500/30 bg-black p-6">
            <span className={`text-red-500 font-mono ${sizeClasses[size]} uppercase tracking-wider`}>
                [SYSTEM] {text}<span className="inline-block w-8">{getDots()}</span>
            </span>
        </div>
    );

    if (fullScreen) {
        return (
            <div className="min-h-screen bg-black flex items-center justify-center">
                {spinner}
            </div>
        );
    }

    return spinner;
}