Assist_Design/apps/portal/src/components/templates/AuthLayout/AuthLayout.tsx

"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="w-full flex flex-col items-center py-[var(--cp-space-3xl)]">
      <div className="w-full max-w-md">
        {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"
            >
              <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-primary" />
          </div>
          <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground mb-3">
            {title}
          </h1>
          {subtitle && (
            <p className="text-base text-muted-foreground leading-relaxed">{subtitle}</p>
          )}
        </div>
      </div>

      <div className="mt-8 w-full max-w-md">
        <div className="bg-card text-card-foreground py-10 px-6 rounded-3xl border border-border shadow-[var(--cp-card-shadow-lg)] sm:px-12">
          {children}
        </div>
      </div>
    </div>
  );
}