"use client";

import Link from "next/link";
import { Logo } from "@/components/logo";
import { Container } from "@/components/container";
import { LanguageSelector } from "@/components/language-selector";
import { useLanguage } from "@/lib/i18n/context";
import type { Dictionary } from "@/lib/i18n/translations";

export type AuthPageKey = keyof Dictionary["auth"]["pages"];

const footerLinkHrefs: Partial<Record<AuthPageKey, string>> = {
  login: "/register",
  register: "/login",
  forgotPassword: "/login",
};

export function AuthCard({
  page,
  hideDescription = false,
  children,
}: {
  page: AuthPageKey;
  hideDescription?: boolean;
  children: React.ReactNode;
}) {
  const { t } = useLanguage();
  const copy = t.auth.pages[page];
  const footerHref = footerLinkHrefs[page];

  return (
    <div className="relative flex min-h-[calc(100dvh-4rem)] items-center justify-center overflow-hidden bg-radial-spotlight py-16">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-grid [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black_10%,transparent_75%)]"
      />
      <div className="absolute top-4 right-4 z-10 sm:top-6 sm:right-6">
        <LanguageSelector />
      </div>
      <Container className="relative flex justify-center">
        <div className="flex w-full max-w-md flex-col gap-6">
          <Link href="/" className="flex justify-center">
            <Logo />
          </Link>

          <div className="flex flex-col gap-6 rounded-2xl border border-border bg-card/60 p-6 glass-panel sm:p-8">
            <div className="flex flex-col gap-1.5 text-center">
              <h1 className="text-xl font-semibold tracking-tight text-foreground">
                {copy.title}
              </h1>
              {!hideDescription && copy.description ? (
                <p className="text-sm text-muted-foreground">{copy.description}</p>
              ) : null}
            </div>

            {children}
          </div>

          {"footerPrompt" in copy && footerHref ? (
            <p className="text-center text-sm text-muted-foreground">
              {copy.footerPrompt}{" "}
              <Link
                href={footerHref}
                className="font-medium text-primary underline-offset-2 hover:underline"
              >
                {copy.footerLink}
              </Link>
            </p>
          ) : null}
        </div>
      </Container>
    </div>
  );
}