import FormMessage from "@/components/form-message";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import LoginForm from "@/features/auth/components/login-form";
import { LogIn } from "lucide-react";

/**
 * [로그인 페이지 컴포넌트]
 *
 * 브랜드 컬러 기반 글래스모피즘 카드 디자인
 * - 보라색 그라디언트 아이콘 배지
 * - shadcn/ui 컴포넌트로 일관된 디자인 시스템 유지
 *
 * @param searchParams - URL 쿼리 파라미터 (에러 메시지 전달용)
 */
export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{ message: string }>;
}) {
  const { message } = await searchParams;

  return (
    <div className="relative z-10 w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
      <FormMessage message={message} />

      <Card className="border-brand-200/30 bg-white/80 shadow-2xl shadow-brand-500/5 backdrop-blur-xl dark:border-brand-800/30 dark:bg-brand-950/70">
        <CardHeader className="space-y-3 text-center">
          <div className="mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br from-brand-500 to-brand-700 shadow-lg shadow-brand-500/25">
            <LogIn className="h-7 w-7 text-white" />
          </div>
          <CardTitle className="text-3xl font-bold tracking-tight">
            환영합니다!
          </CardTitle>
          <CardDescription className="text-base">
            서비스 이용을 위해 로그인해 주세요.
          </CardDescription>
        </CardHeader>

        <CardContent>
          <LoginForm />
        </CardContent>
      </Card>
    </div>
  );
}