"use client";

import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

/**
 * Visual wrapper used by every /(auth) page. Centralises the card chrome
 * so the per-page files only deal with form state.
 */
export function AuthCard({
  title,
  description,
  footer,
  children,
}: {
  title: string;
  description?: string;
  footer?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <Card>
      <CardHeader className="pb-8">
        <CardTitle className="text-2xl">{title}</CardTitle>
        {description ? <CardDescription>{description}</CardDescription> : null}
      </CardHeader>
      <CardContent className="space-y-4">{children}</CardContent>
      {footer ? (
        <div className="px-6 pb-6 text-sm text-muted-foreground">{footer}</div>
      ) : null}
    </Card>
  );
}

export function AuthFooterLink({
  prefix,
  href,
  label,
}: {
  prefix: string;
  href: string;
  label: string;
}) {
  return (
    <p>
      {prefix}{" "}
      <Link href={href} className="text-primary underline-offset-4 hover:underline">
        {label}
      </Link>
    </p>
  );
}