"use client";
import BackButton from "@/components/Buttons/BackButton";
import StartpageButton from "@/components/Buttons/StartpageButton";
import Link from "next/link";
import React from "react";
import { useState } from "react";

const LoginPage = () => {
	const [email, setEmail] = useState<string>("");
	const [password, setPassword] = useState<string>("");

	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		console.log("Email:", email);
		console.log("Password:", password);
	};

	return (
		<div className="w-full max-w-md bg-white rounded-lg shadow-md p-8">
			<h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
			<form onSubmit={handleSubmit}>
				<div className="mb-4">
					<label
						htmlFor="email"
						className="block text-gray-700 font-medium mb-2"
					>
						Email
					</label>
					<input
						type="email"
						id="email"
						value={email}
						onChange={(e) => setEmail(e.target.value)}
						className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
						placeholder="Enter your email"
						required
					/>
				</div>
				<div className="mb-4">
					<label
						htmlFor="password"
						className="block text-gray-700 font-medium mb-2"
					>
						Password
					</label>
					<input
						type="password"
						id="password"
						value={password}
						onChange={(e) => setPassword(e.target.value)}
						className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
						placeholder="Enter your password"
						required
					/>
				</div>
				<button
					type="submit"
					className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-200"
				>
					Login
				</button>
				<Link className="block text-center mt-4 text-blue-500" href="register">
					Create an account
				</Link>
				<div className="flex justify-between mt-8">
					<BackButton />
					<StartpageButton />
				</div>
			</form>
		</div>
	);
};

export default LoginPage;
