import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { LoginForm } from "@/components/auth/login-form";
import { Building } from "lucide-react";
import { getTranslations, getCurrentLocale } from "@/lib/i18n";

export default async function LoginPage() {
  const locale = await getCurrentLocale();
  const t = getTranslations(locale);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-background p-4">
      <div className="w-full max-w-md">
        <Card className="shadow-2xl">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground">
              <Building className="h-8 w-8" />
            </div>
            <CardTitle className="font-headline text-3xl font-bold tracking-tight">
              {t.LoginPage.title}
            </CardTitle>
            <CardDescription>
              {t.LoginPage.description}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <LoginForm t={t.LoginPage} />
          </CardContent>
        </Card>
      </div>
    </main>
  );
}