import { Box, Button, TextField, Typography } from '@mui/material';

interface AuthFormProps {
  config: {
    username: string;
    password: string;
  };
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onLogin: () => void;
}

const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: '1.5vw',
        alignItems: 'center',
      }}
    >
      <Typography variant="h6">Логин</Typography>
      <TextField
        required
        name="username"
        variant="outlined"
        value={config.username}
        onChange={handleInputChange}
        sx={{
          width: '100%',
          // '& .MuiFormLabel-root': {
          //   color: 'white',
          // },
          '& .MuiInputBase-input': {
            color: 'white',
          },
          '& .MuiInput-underline:after': {
            borderBottomColor: '#B2BAC2',
          },
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: '#E0E3E7',
              color: 'white',
            },
            '&:hover fieldset': {
              borderColor: '#B2BAC2',
            },
            '&.Mui-focused fieldset': {
              borderColor: '#6F7E8C',
            },
          },
        }}
      />
      <Typography variant="h6">Пароль</Typography>
      <TextField
        required
        type="password"
        name="password"
        variant="outlined"
        value={config.password}
        onChange={handleInputChange}
        sx={{
          width: '100%',
          // '& .MuiFormLabel-root': {
          //   color: 'white',
          // },
          '& .MuiInputBase-input': {
            color: 'white',
          },
          '& .MuiInput-underline:after': {
            borderBottomColor: '#B2BAC2',
          },
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: '#E0E3E7',
              color: 'white',
            },
            '&:hover fieldset': {
              borderColor: '#B2BAC2',
            },
            '&.Mui-focused fieldset': {
              borderColor: '#6F7E8C',
            },
          },
        }}
      />
      <Button onClick={onLogin} variant="contained">
        Войти
      </Button>
    </Box>
  );
};

export default AuthForm;