import React, { useState } from 'react';

interface Props {
onAuth: (username: string, password: string) => void;
}

const AuthComponent: React.FC<Props> = ({ onAuth }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
onAuth(username, password);
};

return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<form onSubmit={handleSubmit} style={{ width: '50%' }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '1rem' }}>
<label htmlFor="username" style={{ margin: '1rem' }}>
Username:
</label>
<input
type="text"
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '1rem' }}>
<label htmlFor="password" style={{ margin: '1rem' }}>
Password:
</label>
<input
type="password"
id="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}
/>
</div>
<button type="submit" style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}>
Submit
</button>
</form>
</div>
);
};

export default AuthComponent;
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence