import React from 'react';
import { TextField, InputAdornment, FormHelperText, Box } from '@mui/material';
import { UnitSystem, DistanceType } from '../types/fuel-logs.types';

interface Props {
  type: DistanceType;
  value?: number;
  onChange: (value: number) => void;
  unitSystem?: UnitSystem;
  error?: string;
  disabled?: boolean;
}

export const DistanceInput: React.FC<Props> = ({ type, value, onChange, unitSystem = 'imperial', error, disabled }) => {
  const units = unitSystem === 'imperial' ? 'miles' : 'km';
  const label = type === 'odometer' ? 'Odometer' : 'Trip Distance';
  return (
    <Box>
      <TextField
        label={label}
        type="number"
        value={value ?? ''}
        onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
        fullWidth
        error={!!error}
        disabled={disabled}
        inputProps={{ step: type === 'trip' ? 0.1 : 1, min: 0 }}
        InputProps={{ endAdornment: <InputAdornment position="end">{units}</InputAdornment> }}
      />
      {error && <FormHelperText error>{error}</FormHelperText>}
    </Box>
  );
};

