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

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',
      }}
    >
      <GradientTextField
        label="Никнейм"
        required
        name="username"
        value={config.username}
        onChange={handleInputChange}
        sx={{
          mt: '2.5vw',
          mb: '0vw'
        }}
      />
      <GradientTextField
        label="Пароль"
        required
        name="password"
        value={config.password}
        onChange={handleInputChange}
      />
      <Button onClick={onLogin} variant="contained"
      sx={{
        transition: 'transform 0.3s ease',
        width: '60%',
        mt: 2,
        background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
        fontFamily: 'Benzin-Bold',
        borderRadius: '2.5vw',
        fontSize: '2vw',
        '&:hover': {
          transform: 'scale(1.1)',

        },
      }}>
        Войти
      </Button>
    </Box>
  );
};

export default AuthForm;
