incr/resources/js/components/Display/LedDisplay.tsx

import { cn } from '@/lib/utils';
import { useEffect, useState } from 'react';

interface LedDisplayProps {
    value: number;
    className?: string;
    animate?: boolean;
    onClick?: () => void;
}

export default function LedDisplay({
    value,
    className,
    onClick
}: LedDisplayProps) {
    const [displayValue, setDisplayValue] = useState(0);

    // Animate number changes
    useEffect(() => {
        setDisplayValue(value);
        return;
    }, [value]);

    // Format number with zero-padding for consistent width
    const formatValue = (value: number) => {
        // Always pad to 5 digits for consistent display width
        const integerPart = Math.floor(value);
        return integerPart.toString().padStart(5, '0');
    };

    const formattedValue = formatValue(displayValue);

    return (
        <div
            className={cn(
                "w-full text-center select-none cursor-pointer",
                "bg-black text-red-500",
                "px-8 py-12 transition-all duration-300",
                className
            )}
            onClick={onClick}
        >
            <div className="relative w-full flex items-center justify-center">
                <div className={cn(
                    "relative z-10",
                    "text-[8rem] md:text-[12rem] lg:text-[16rem]",
                    "font-digital font-normal",
                    "text-red-500",
                    "drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
                    "filter brightness-110",
                    "leading-none",
                    "transition-all duration-300"
                )}
                style={{ letterSpacing: '0.15em' }}>
                    {formattedValue}
                </div>
            </div>
        </div>
    );
}