import React, { useState } from 'react';
function LoginForm({ onLogin }) {
	// ユーザー名とパスワードのステートを定義
	const [username, setUsername] = useState('');
	const [password, setPassword] = useState('');
	// エラーメッセージのステートを定義
	const [error, setError] = useState('');
	// フォーム送信時に呼ばれる非同期関数
	const handleSubmit = async (e) => {
		e.preventDefault(); // フォームの送信アクション停止
		// APIエンドポイントにログインリクエストを送信
		const response = await fetch('/api/login', {
			method: 'POST', // POSTリクエスト
			headers: {
				'Content-Type': 'application/json', // タイプをJSONに設定 
			},
			// ユーザー名とパスワードを設定
			body: JSON.stringify({ username, password }),
		});
		if (response.ok) { // レスポンスが成功した場合
			onLogin(); // onLogin関数を呼び出してログイン処理を完了 
		} else {
			setError('Invalid username or password'); // エラーを設定
		}
	};
	return (
		<form onSubmit={handleSubmit}>
			<input
				type="text"
				value={username}
				onChange={(e) => setUsername(e.target.value)}
				placeholder="Username"
				required
			/>
			<input
				type="password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				placeholder="Password"
				required
			/>
			<button type="submit">Login</button>
			{error && <p>{error}</p>}
		</form>
	);
}
export default LoginForm;