"use client";

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

export interface AuthLayoutProps {
  children: React.ReactNode;
  title: string;
  subtitle?: string;
  showBackButton?: boolean;
  backHref?: string;
  backLabel?: string;
}

export function AuthLayout({
  children,
  title,
  subtitle,
  showBackButton = false,
  backHref = "/",
  backLabel = "Back to Home",
}: AuthLayoutProps) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        {showBackButton && (
          <div className="mb-6">
            <Link
              href={backHref}
              className="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors duration-200"
            >
              <ArrowLeftIcon className="h-4 w-4 mr-2" />
              {backLabel}
            </Link>
          </div>
        )}

        <div className="text-center">
          <div className="flex justify-center mb-8">
            <Logo size={72} className="text-blue-600" />
          </div>
          <h1 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{title}</h1>
          {subtitle && <p className="text-base text-gray-600 leading-relaxed">{subtitle}</p>}
        </div>
      </div>

      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white py-10 px-6 shadow-2xl rounded-3xl border border-gray-100 sm:px-12">
          {children}
        </div>
      </div>
    </div>
  );
}
