'use client';

import { cn } from '@/lib/utils';
import { BrandLogo } from '@/components/brand/BrandLogo';

export function AuthShell({
  title,
  subtitle,
  children,
  className,
  bodyClassName,
  wide,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  className?: string;
  bodyClassName?: string;
  wide?: boolean;
}) {
  return (
    <div className={cn(wide ? 'register-worker-page' : 'auth-page', className)}>
      <div className="auth-panel">
        <div className="auth-hero">
          <div className="auth-hero-inner">
            <BrandLogo variant="stacked" className="mx-auto mb-4" />
            <h1 className="auth-hero-title">{title}</h1>
            {subtitle ? <p className="auth-hero-subtitle mx-auto max-w-xl">{subtitle}</p> : null}
          </div>
        </div>
        <div className={cn('auth-body', bodyClassName)}>{children}</div>
      </div>
    </div>
  );
}