import Link from "next/link";
import { Boxes } from "lucide-react";
import { LanguageToggle } from "@/components/language-toggle";
import { LoginForm } from "@/components/auth/login-form";
import { Card } from "@/components/ui";
import { getDictionary, getLocale } from "@/lib/i18n";

export default async function LoginPage() {
  const locale = await getLocale();
  const t = getDictionary(locale).auth;

  return (
    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-4 py-10">
      <div className="mb-6 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-2 font-bold text-ink">
          <span className="flex h-9 w-9 items-center justify-center rounded-md bg-ink text-white">
            <Boxes size={19} />
          </span>
          wakelai.com
        </Link>
        <LanguageToggle locale={locale} />
      </div>
      <Card>
        <h1 className="text-2xl font-bold text-ink">{t.loginTitle}</h1>
        <p className="mt-2 text-sm text-slate-600">{t.loginSubtitle}</p>
        <div className="mt-6">
          <LoginForm locale={locale} />
        </div>
      </Card>
      <p className="mt-4 text-center text-sm text-slate-600">
        {t.noAccount}{" "}
        <Link className="font-semibold text-brand" href="/register">
          {t.createAccount}
        </Link>
      </p>
    </main>
  );
}