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' }}>
      <TextField
        required
        name="username"
        label="Введите ник"
        variant="outlined"
        value={config.username}
        onChange={handleInputChange}
      />
      <TextField
        required
        type="password"
        name="password"
        label="Введите пароль"
        variant="outlined"
        value={config.password}
        onChange={handleInputChange}
      />
      <Button onClick={onLogin} variant="contained">
        Войти
      </Button>
    </Box>
  );
};

export default AuthForm;
