import MenuContainer from "@root/src/components/atoms/MenuContainer";
import ThemeButton from "@root/src/components/organisms/ThemeButton";
import { main } from "@root/src/configure";
import { useTranslation } from "react-i18next";
import LanguageButton from "../organisms/LanguageButton";
interface LoginPageTemplateProps {
	handleLogin: () => void;
	getStartedOnClick: () => void;
}
const LoginPageTemplate = ({
	handleLogin,
	getStartedOnClick,
}: LoginPageTemplateProps) => {
	const { t } = useTranslation();
	return (
		<div className="hero min-h-screen bg-base-200">
			<MenuContainer position="top-right" tooltipPosition="left">
				<ThemeButton />
				<LanguageButton />
			</MenuContainer>
			<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" onClick={getStartedOnClick}>
						{t("button.navigation.more")}
					</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("input.username")}</span>
								</label>
								<input
									type="text"
									placeholder={t("input.username")}
									className="input input-bordered"
								/>
							</div>
							<div className="form-control">
								<label className="label">
									<span className="label-text">{t("input.password")}</span>
								</label>
								<input
									type="password"
									placeholder={t("input.password")}
									className="input input-bordered"
								/>
							</div>
							<div className="form-control mt-6">
								<input
									className="btn btn-primary"
									onClick={handleLogin}
									defaultValue={t("button.action.login")}
									type="button"
								/>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	);
};

export default LoginPageTemplate;