import type {Route} from "next";
import Link from "next/link";
import {ReactNode} from "react";
import {Car} from "lucide-react";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";

type AuthCardProps = {
  locale: string;
  title: string;
  description: string;
  footer?: ReactNode;
  children: ReactNode;
};

export function AuthCard({locale, title, description, footer, children}: AuthCardProps) {
  return (
    <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-50 via-white to-white px-4 py-12">
      {/* Background decorative elements */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 h-96 w-96 rounded-full bg-indigo-100/60 blur-3xl" />
        <div className="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-indigo-100/40 blur-3xl" />
        <div className="absolute top-1/3 left-1/4 h-64 w-64 rounded-full bg-purple-50/50 blur-3xl" />
      </div>

      <div className="relative w-full max-w-md animate-fade-up">
        {/* Logo */}
        <div className="mb-8 flex flex-col items-center gap-3">
          <Link href={`/${locale}` as Route} className="flex items-center gap-3 group">
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-600 shadow-lg shadow-indigo-200 transition-transform duration-200 group-hover:scale-105">
              <Car className="h-6 w-6 text-white" />
            </div>
            <span className="text-2xl font-bold text-gray-900 tracking-tight">RentCar</span>
          </Link>
        </div>

        {/* Card */}
        <Card className="border-gray-200 bg-white shadow-xl rounded-2xl">
          <CardHeader className="pb-4 pt-8 px-8">
            <CardTitle className="text-2xl font-bold text-gray-900">{title}</CardTitle>
            <CardDescription className="mt-1 text-gray-500">{description}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4 px-8 pb-8">
            {children}
            {footer ? <div className="pt-2">{footer}</div> : null}
          </CardContent>
        </Card>
      </div>
    </main>
  );
}