import { Box, TextField as MuiTextField } from '@mui/material';
import { FieldComponentProps } from '../../types/overrides';

export default function DateRangeField({ value, onChange, disabled }: FieldComponentProps) {
  const rangeVal = (value as { start?: string; end?: string }) || {};
  return (
    <Box sx={{ display: "flex", gap: 1 }}>
      <MuiTextField
        type="date"
        placeholder="From"
        size="small"
        value={rangeVal.start ?? ""}
        onChange={(e) => onChange({ ...rangeVal, start: e.target.value || undefined })}
        InputLabelProps={{ shrink: true }}
        sx={{ width: 170 }}
        disabled={disabled}
      />
      <MuiTextField
        type="date"
        placeholder="To"
        size="small"
        value={rangeVal.end ?? ""}
        onChange={(e) => onChange({ ...rangeVal, end: e.target.value || undefined })}
        InputLabelProps={{ shrink: true }}
        sx={{ width: 170 }}
        disabled={disabled}
      />
    </Box>
  );
}