import { useTranslation } from "react-i18next";
import { main } from "../configure";

const LoginPage = () => {
	const { t } = useTranslation();
	return (
		<div className="hero min-h-screen bg-base-200">
			<div className="flex-col justify-center hero-content lg:flex-row-reverse">
				<div className="text-center lg:text-left">
					<h1 className="mb-5 text-5xl font-bold">{main.program_name}</h1>
					<p className="mb-5">{main.program_description}</p>
					<button className="btn btn-outline">Get Started</button>
				</div>
				<div className="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
					<div className="card-body">
						<form>
							<div className="form-control">
								<label className="label">
									<span className="label-text">{t("login_username")}</span>
								</label>
								<input
									type="text"
									placeholder={t("login_username")}
									className="input input-bordered"
								/>
							</div>
							<div className="form-control">
								<label className="label">
									<span className="label-text">{t("login_password")}</span>
								</label>
								<input
									type="password"
									placeholder={t("login_password")}
									className="input input-bordered"
								/>
							</div>
							<div className="form-control mt-6">
								<label className="cursor-pointer label justify-start gap-4">
									<input type="checkbox" className="checkbox checkbox-success" />
									<span className="label-text justify-start">
										{t("login_accept_terms")}
									</span>
								</label>
							</div>
							<div className="form-control mt-6">
								<input
									type="submit"
									value={t("login_button")}
									className="btn btn-primary"
								/>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	);
};

export default LoginPage;
