import { UserLock } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "./components/ui/card";
import { Button } from "./components/ui/button";
import { Link } from "react-router";

const SUPPORT_MAIL = "mailto:" + import.meta.env.VITE_SUPPORT_EMAIL;

export function AuthLayout({
  children,
  title = "Connexion",
  description = "Entrez votre email pour recevoir un lien de connexion ou un code de vérification.",
}: {
  children: React.ReactNode;
  title?: string;
  description?: string;
}) {
  return (
    <main className="flex h-full flex-col items-center justify-center p-4">
      <div className="w-full max-w-md">
        <Card className="w-full">
          <CardHeader className="space-y-1">
            <CardTitle className="text-2xl font-bold flex items-center justify-center">
              <UserLock className="h-6 w-6 mr-2" />
              {title}
            </CardTitle>
            <CardDescription className="text-center">
              {description}
            </CardDescription>
          </CardHeader>
          <CardContent>{children}</CardContent>
          <CardFooter className="flex justify-between text-sm text-muted-foreground">
            <p className="text-xs">Besoin d'aide ?</p>
            <Button variant="link" size="sm" asChild className="h-auto p-0">
              <Link to={SUPPORT_MAIL} className="text-xs">
                Contactez le support
              </Link>
            </Button>
          </CardFooter>
        </Card>
      </div>
    </main>
  );
}

export function MainLayout({
  children,
  page
}: {
  children: React.ReactNode;
  page: React.ReactNode;
}) {
  return (
    <main className="container mx-auto py-8 px-4">
      <div className="flex justify-between items-center mb-6">
        {children}
      </div>

      {page}
    </main>
  );
}