import { Autocomplete, TextField } from '@mui/material'

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

const options = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
]

export function SelectMui({ label, color }: SelectMuiProps) {
  return (
    <Autocomplete
      options={options}
      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,
        },
      }}
      renderInput={(params) => (
        <TextField {...params} label={label} variant="standard" />
      )}
    />
  )
}
