"use client";

import Link from "next/link";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";

export interface AuthLayoutProps {
  children: React.ReactNode;
  title: string;
  subtitle?: string;
  showBackButton?: boolean;
  backHref?: string;
  backLabel?: string;
  /** Use wider layout for forms with more content like signup */
  wide?: boolean;
}

export function AuthLayout({
  children,
  title,
  subtitle,
  showBackButton = false,
  backHref = "/",
  backLabel = "Back to Home",
  wide = false,
}: AuthLayoutProps) {
  const maxWidth = wide ? "max-w-xl" : "max-w-md";

  return (
    <div className="w-full flex flex-col items-center justify-center min-h-[calc(100dvh-4rem)] py-8 sm:py-12">
      <div className={`w-full ${maxWidth}`}>
        {showBackButton && (
          <div className="mb-6">
            <Link
              href={backHref}
              className="inline-flex items-center text-sm font-medium text-muted-foreground hover:text-foreground transition-colors group"
            >
              <ArrowLeftIcon className="h-4 w-4 mr-2 transition-transform group-hover:-translate-x-0.5" />
              {backLabel}
            </Link>
          </div>
        )}

        <div className="text-center">
          <h1 className="text-2xl font-bold tracking-tight text-foreground mb-2">{title}</h1>
          {subtitle && (
            <p className="text-sm text-muted-foreground leading-relaxed max-w-sm mx-auto">
              {subtitle}
            </p>
          )}
        </div>
      </div>

      <div className={`mt-6 w-full ${maxWidth}`}>
        <div className="bg-card text-card-foreground py-8 px-6 rounded-xl border border-border shadow-sm sm:px-10">
          {children}
        </div>

        {/* Trust indicator */}
        <div className="mt-6 text-center">
          <p className="text-xs text-muted-foreground/60 flex items-center justify-center gap-1.5">
            <span className="h-2 w-2 rounded-full bg-green-500/80" />
            Secure login protected by SSL encryption
          </p>
        </div>
      </div>
    </div>
  );
}
