import React from 'react';
import { cn } from '@/lib/utils';

export interface TenantWelcomeLayoutProps {
  eyebrow?: string;
  title?: string;
  subtitle?: string;
  headerAction?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
}

export function TenantWelcomeLayout({
  eyebrow,
  title,
  subtitle,
  headerAction,
  footer,
  children,
}: TenantWelcomeLayoutProps) {
  React.useEffect(() => {
    document.body.classList.add('tenant-admin-theme', 'tenant-admin-welcome-theme');

    return () => {
      document.body.classList.remove('tenant-admin-theme', 'tenant-admin-welcome-theme');
    };
  }, []);

  return (
    <div className="min-h-screen w-full bg-brand-gradient text-brand-slate transition-colors duration-500 ease-out">
      <div className="mx-auto flex min-h-screen w-full max-w-5xl px-6 py-12 md:py-16 lg:px-10">
        <div className="flex w-full flex-col gap-10 rounded-[40px] border border-brand-rose-soft bg-brand-card p-8 shadow-brand-primary backdrop-blur-xl md:gap-14 md:p-14">
          <header className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
            <div className="max-w-xl">
              {eyebrow && (
                <p className="text-xs uppercase tracking-[0.35em] text-brand-rose">{eyebrow}</p>
              )}
              {title && (
                <h1 className="mt-2 font-display text-4xl font-semibold tracking-tight text-brand-slate md:text-5xl">
                  {title}
                </h1>
              )}
              {subtitle && (
                <p className="mt-4 text-base font-sans-marketing text-brand-navy/80 md:text-lg">
                  {subtitle}
                </p>
              )}
            </div>
            {headerAction && <div className="flex shrink-0 items-center">{headerAction}</div>}
          </header>

          <main className="flex flex-1 flex-col gap-8">
            {children}
          </main>

          {footer && (
            <footer className="flex flex-col items-center gap-4 text-sm text-brand-navy/70 md:flex-row md:justify-between">
              {footer}
            </footer>
          )}
        </div>
      </div>
    </div>
  );
}

TenantWelcomeLayout.displayName = 'TenantWelcomeLayout';