import React from 'react';
import { Form } from 'react-bootstrap';
import { normalizeIsoDateInput } from '@/utils/dateFormat';

type IsoDateInputProps = {
    label: string;
    value?: string | null;
    onChange: (value: string) => void;
    placeholder?: string;
    name?: string;
    required?: boolean;
    disabled?: boolean;
};

export default function IsoDateInput({
    label,
    value,
    onChange,
    placeholder = 'YYYY-MM-DD',
    name,
    required = false,
    disabled = false,
}: IsoDateInputProps) {
    return (
        <Form.Group>
            <Form.Label>{label}</Form.Label>
            <Form.Control
                type="text"
                inputMode="numeric"
                name={name}
                placeholder={placeholder}
                value={normalizeIsoDateInput(value)}
                onChange={(e) => onChange(e.target.value)}
                required={required}
                disabled={disabled}
            />
        </Form.Group>
    );
}