import Link from "next/link";
import { Zap } from "lucide-react";
import { commonTexts } from "@/lib/i18n/common";

export function AuthShell({
  title,
  description,
  children,
  footer,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <div className="w-full max-w-[452px]">
      <Link href="/" className="mb-7 flex items-center gap-2.5 lg:hidden">
        <span className="flex size-9 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg shadow-primary/25">
          <Zap className="size-5" strokeWidth={2.5} />
        </span>
        <span className="font-display text-lg font-semibold tracking-tight">
          {commonTexts.appName}
        </span>
      </Link>

      <div className="rounded-2xl border bg-card p-6 shadow-sm sm:p-8">
        <h1 className="font-display text-[1.6rem] leading-tight font-semibold tracking-tight">
          {title}
        </h1>
        {description ? (
          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{description}</p>
        ) : null}
        <div className="mt-7">{children}</div>
      </div>

      {footer ? (
        <div className="mt-5 text-center text-sm text-muted-foreground">{footer}</div>
      ) : null}
    </div>
  );
}

export default AuthShell;