import React from 'react';

import { FormControl, TextField as MuiTextField } from '@mui/material';

import { TextFieldBaseProps } from '../interfaces';
import { styled } from '@mui/material/styles';

const TextFieldStyled = styled(MuiTextField)({
  textTransform: 'none',
  color: 'currentcolor',
});

export const TextField: React.FC<TextFieldBaseProps> = ({ label, ...props }) => {
  return (
    <FormControl sx={{ width: '100%' }}>
      <TextFieldStyled {...props} label={label} />
    </FormControl>
  );
};