import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

export function Button({ children, variant = 'primary', size = 'md', className, loading, icon: Icon, ...props }) {
    const variants = {
        primary:   'bg-cyan-500 hover:bg-cyan-400 text-black font-semibold shadow-[0_0_20px_rgba(0,212,255,0.3)] hover:shadow-[0_0_30px_rgba(0,212,255,0.5)]',
        secondary: 'bg-white/10 hover:bg-white/15 text-white border border-white/20',
        danger:    'bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30',
        ghost:     'hover:bg-white/5 text-white/70 hover:text-white',
        outline:   'border border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10',
    };
    const sizes = {
        sm:  'h-7 px-3 text-xs gap-1.5',
        md:  'h-9 px-4 text-sm gap-2',
        lg:  'h-11 px-6 text-base gap-2',
        icon: 'h-9 w-9 p-0',
    };

    return (
        <motion.button
            whileTap={{ scale: 0.97 }}
            className={cn(
                'inline-flex items-center justify-center rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
                variants[variant],
                sizes[size],
                className
            )}
            disabled={loading || props.disabled}
            {...props}
        >
            {loading ? (
                <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                </svg>
            ) : Icon ? (
                <Icon className="w-4 h-4" />
            ) : null}
            {size !== 'icon' && children}
        </motion.button>
    );
}