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

export default function NumberRangeField({ value, onChange, disabled }: FieldComponentProps) {
  const rangeVal = (value as { min?: string; max?: string }) || {};
  return (
    <Box sx={{ display: "flex", gap: 1 }}>
      <MuiTextField
        type="number"
        placeholder="Min"
        size="small"
        value={rangeVal.min ?? ""}
        onChange={(e) => onChange({ ...rangeVal, min: e.target.value || undefined })}
        sx={{ width: 100 }}
        disabled={disabled}
      />
      <MuiTextField
        type="number"
        placeholder="Max"
        size="small"
        value={rangeVal.max ?? ""}
        onChange={(e) => onChange({ ...rangeVal, max: e.target.value || undefined })}
        sx={{ width: 100 }}
        disabled={disabled}
      />
    </Box>
  );
}