import { TextField } from '@mui/material'

type InputMuiProps = {
  label: string
  variant: 'standard' | 'filled' | 'outlined'
  type: string
  color: string
}

export function InputMui({ label, variant, type, color }: InputMuiProps) {
  return (
    <TextField
      label={label}
      variant={variant}
      type={type}
      sx={{
        '& .MuiOutlinedInput-root': {
          '& fieldset': {
            borderColor: color, // Inicialmente transparente
          },
          '&:hover fieldset': {
            borderColor: color, // Mantém transparente ao passar o mouse
          },
          '&.Mui-focused fieldset': {
            borderColor: color, // Mantém transparente ao focar
          },
        },
        '& label.Mui-focused': {
          color,
        },
        '& label': {
          color,
        },
        '& input': {
          color,
        },
        '& .MuiInputBase-input': {
          color: 'white',
        },
        '& .MuiInput-underline:before': {
          borderBottomColor: color,
        },
        '& .MuiInput-underline:hover:before': {
          borderBottomColor: `${color} !important`,
        },
        '& .MuiInput-underline:after': {
          borderBottomColor: color,
        },
        '& .MuiFilledInput-underline:before': {
          borderBottomColor: color,
        },
        '& .MuiFilledInput-underline:hover:before': {
          borderBottomColor: `${color} !important`,
        },
        '& .MuiFilledInput-underline:after': {
          borderBottomColor: color,
        },
      }}
    />
  )
}
