import React from 'react';

interface TechButtonProps {
    children?: React.ReactNode;
    onClick?: () => void;
    active?: boolean;
    variant?: 'blue' | 'red' | 'amber' | 'green';
    className?: string;
}

export const TechButton: React.FC<TechButtonProps> = ({
    children,
    onClick,
    active = false,
    variant = 'blue',
    className = ''
}) => {
    const colors = {
        blue: 'from-blue-600 to-cyan-600 hover:shadow-glow-blue border-cyan-400/30',
        red: 'from-red-600 to-pink-600 hover:shadow-glow-red border-red-400/30',
        amber: 'from-amber-500 to-orange-600 hover:shadow-orange-500/50 border-orange-400/30',
        green: 'from-emerald-500 to-green-600 hover:shadow-green-500/50 border-green-400/30'
    };

    return (
        <button
            onClick={onClick}
            className={`
                relative px-4 py-2 font-tech font-bold tracking-wider uppercase transition-all duration-300
                clip-tech border-b-2 border-r-2
                ${active ? `bg-gradient-to-r ${colors[variant]} text-white` : 'bg-slate-800/50 text-slate-400 hover:text-white hover:bg-slate-700/50 border-slate-600'}
                ${className}
            `}
        >
            {active && <div className="absolute inset-0 bg-white/20 animate-pulse pointer-events-none"></div>}
            {children}
        </button>
    );
};