import {
  Box,
  BoxProps,
  styled,
  TextField as MuiTextField,
  TextFieldProps as MuiTextFieldProps,
} from '@mui/material'
import FieldLabel from './FormLabel'

const StyledTextField = styled(MuiTextField)(({ theme }) => ({
  '& label': {
    display: 'none',
  },
  '& legend': {
    '& span': {
      display: 'none',
    },
  },
}))

export type ITextFieldProps = {
  containerProps?: BoxProps
} & MuiTextFieldProps

export default function TextField({
  name,
  label,
  value,
  onChange,
  required = false,
  containerProps,
  ...rest
}: ITextFieldProps) {
  return (
    <Box width="100%" {...containerProps}>
      <FieldLabel label={label} required={required} name={name} />
      <StyledTextField
        id={name}
        value={value}
        name={name}
        onChange={onChange}
        {...rest}
      />
    </Box>
  )
}
