interface DigitalProgressBarProps {
    current: number;
    capacity: number;
}

const BAR_COUNT = 20;

function getGlow(index: number): string {
    if (index < 10) return '0 0 8px rgba(239, 68, 68, 0.6)';
    if (index < 18) return '0 0 8px rgba(249, 115, 22, 0.6)';
    return '0 0 8px rgba(34, 197, 94, 0.6)';
}

function getBarColor(index: number): string {
    if (index < 10) return 'bg-red-500';
    if (index < 18) return 'bg-orange-500';
    return 'bg-green-500';
}

export default function DigitalProgressBar({ current, capacity }: DigitalProgressBarProps) {
    const filledBars = capacity > 0
        ? Math.min(Math.round((current / capacity) * BAR_COUNT), BAR_COUNT)
        : 0;

    return (
        <div
            style={{
                display: 'grid',
                gridTemplateColumns: `repeat(${BAR_COUNT}, 1fr)`,
                gap: '10px',
                height: '2rem',
            }}
        >
            {Array.from({ length: BAR_COUNT }, (_, i) => {
                const filled = i < filledBars;
                return (
                    <div
                        key={i}
                        style={{
                            borderRadius: '3px',
                            transition: 'background-color 300ms, box-shadow 300ms',
                            boxShadow: filled ? getGlow(i) : 'none',
                        }}
                        className={filled ? getBarColor(i) : 'bg-red-500/10'}
                    />
                );
            })}
        </div>
    );
}