import React from 'react';
import { cn } from '../../utils/cn';

export interface ProgressBarProps {
    value: number; // 0 to 100
    max?: number;
    variant?: 'default' | 'gaming' | 'segmented';
    color?: 'cyan' | 'magenta' | 'lime' | 'gold';
    labelLeft?: string;
    labelRight?: string;
    className?: string;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
    value,
    max = 100,
    variant = 'default',
    color = 'cyan',
    labelLeft,
    labelRight,
    className,
}) => {
    const percentage = Math.min(100, Math.max(0, (value / max) * 100));

    const colorStyles = {
        cyan: 'bg-kodo-cyan',
        magenta: 'bg-kodo-magenta',
        lime: 'bg-kodo-lime',
        gold: 'bg-kodo-gold',
    };

    const gradientStyles = {
        cyan: 'from-kodo-cyan to-blue-500',
        magenta: 'from-kodo-magenta to-purple-600',
        lime: 'from-kodo-lime to-green-600',
        gold: 'from-kodo-gold to-orange-500',
    };

    if (variant === 'gaming') {
        return (
            <div className={cn('relative', className)}>
                <div className="h-4 bg-kodo-void rounded-full overflow-hidden border border-kodo-gold/30">
                    <div
                        className={cn(
                            'h-full bg-gradient-to-r shadow-[0_0_10px_rgba(255,215,0,0.5)] transition-all duration-500',
                            gradientStyles.gold
                        )}
                        style={{ width: `${percentage}%` }}
                    />
                </div>
                {(labelLeft || labelRight) && (
                    <div className="flex justify-between text-[10px] font-mono font-bold text-kodo-gold mt-1 uppercase tracking-wider">
                        <span>{labelLeft}</span>
                        <span>{labelRight}</span>
                    </div>
                )}
            </div>
        );
    }

    return (
        <div className={cn('w-full', className)}>
            <div className="h-2 bg-kodo-steel rounded-full overflow-hidden">
                <div
                    className={cn(
                        'h-full transition-all duration-300 shadow-[0_0_10px_currentColor]',
                        colorStyles[color]
                    )}
                    style={{ width: `${percentage}%` }}
                />
            </div>
            {(labelLeft || labelRight) && (
                <div className="flex justify-between text-xs text-gray-500 mt-1 font-mono">
                    <span>{labelLeft}</span>
                    <span>{labelRight}</span>
                </div>
            )}
        </div>
    );
};
