import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
import { styled } from '@mui/material/styles';
import { NumberInputProps, NumberInput as RaNumberInput } from 'react-admin';

const StyledNumberInput = styled(RaNumberInput, { slot: 'root' })(({ label }) => ({
  '& legend': {
    width: label === false ? 0 : 'auto'
  }
}));

function NumberInput(props: NumberInputProps): JSX.Element {
  return (
    // @ts-ignore
    <LabeledInput {...props}>
      {/** @ts-ignore */}
      <StyledNumberInput />
    </LabeledInput>
  );
}

export { NumberInput };
export type { NumberInputProps };