"use client";

import { Input } from "@/src/components/commons/Input";
import { Button } from "@/src/components/commons/Button";
import { Typography } from "../../commons/Typography";
import { useLoginForm } from "@/src/hooks/useLoginForm";
import { useLanguage } from "@/src/hooks/useLanguage";
import Image from "next/image";
import { LanguageSelector } from "@/src/components/LanguageSelector";

export function LoginPage() {
  const { t } = useLanguage();
  const {
    username,
    setUsername,
    password,
    setPassword,
    error,
    isLoading,
    handleSubmit,
  } = useLoginForm();

  return (
    <div className="flex flex-col min-h-screen items-center justify-center gap-10">
      <Image src="/icon.png" alt="Logo_IDH" width={200} height={200} />
      <div className="max-w-sm w-full">
        <div className="flex justify-center mb-6">
          <LanguageSelector />
        </div>
        <div className="border-2 border-zinc-100 shadow-[0_10px_15px_rgba(0,0,0,0.1)] rounded-2xl p-6">
          <div className="text-center space-y-3 mb-6">
            <Typography variant="h3" color="#006f36ff">
              {t("login.title")}
            </Typography>
          </div>

          <form onSubmit={handleSubmit}>
            <Input
              id="username"
              type="email"
              label={t("login.email_label")}
              placeholder={t("login.email_placeholder")}
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />

            <Input
              id="password"
              type="password"
              label={t("login.password_label")}
              placeholder={t("login.password_placeholder")}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />

            {error && (
              <Typography variant="b2" color="#dc2626" className="text-center">
                {error}
              </Typography>
            )}

            <Button type="submit" isLoading={isLoading} className="mt-8">
              {t("login.submit")}
            </Button>
          </form>
        </div>
      </div>
      <Image
        src="/logo_embrapa.png"
        alt="Logo_Embrapa"
        width={200}
        height={200}
        className="mt-6"
      />
    </div>
  );
}