timelapse-calc/src/components/TimeInput.jsx

import { InputNumber, Space } from 'antd';

export default function TimeInput({ label, hours, minutes, seconds, onChange }) {
    const handleChange = (field, value) => {
        // Ensure non-negative values
        const numValue = Math.max(0, value || 0);
        onChange({
            hours: field === 'hours' ? numValue : hours,
            minutes: field === 'minutes' ? numValue : minutes,
            seconds: field === 'seconds' ? numValue : seconds,
        });
    };

    return (
        <div className="form-row">
            <label className="form-label">{label}</label>
            <Space.Compact style={{ width: '100%' }} size="large">
                <InputNumber
                    value={hours}
                    onChange={(value) => handleChange('hours', value)}
                    min={0}
                    placeholder="0"
                    suffix={<span style={{ color: '#999' }}>h</span>}
                    size="large"
                    style={{ width: '33.33%' }}
                    controls={false}
                />
                <InputNumber
                    value={minutes}
                    onChange={(value) => handleChange('minutes', value)}
                    min={0}
                    max={59}
                    placeholder="0"
                    suffix={<span style={{ color: '#999' }}>m</span>}
                    size="large"
                    style={{ width: '33.33%' }}
                    controls={false}
                />
                <InputNumber
                    value={seconds}
                    onChange={(value) => handleChange('seconds', value)}
                    min={0}
                    max={59}
                    placeholder="0"
                    suffix={<span style={{ color: '#999' }}>s</span>}
                    size="large"
                    style={{ width: '33.34%' }}
                    controls={false}
                />
            </Space.Compact>
        </div>
    );
}