'use client';

import { ReactNode } from 'react';

import { Sidebar, MobileSidebar, Header, PageTransition } from '@/components/layout';
import { useSidebarStore } from '@/stores/sidebar-store';
import { cn } from '@/lib/utils';

interface AuthLayoutProps {
  children: ReactNode;
  params: { locale: string };
}

/**
 * Authenticated layout with sidebar and header
 * Used for all protected routes
 */
export default function AuthLayout({ children, params: { locale } }: AuthLayoutProps) {
  const { isExpanded } = useSidebarStore();

  return (
    <div className="min-h-screen bg-background">
      {/* Desktop Sidebar - hidden on mobile */}
      <div className="hidden lg:block">
        <Sidebar locale={locale} />
      </div>

      {/* Mobile Sidebar Sheet */}
      <MobileSidebar locale={locale} />

      {/* Main Content Area */}
      <div
        className={cn(
          'flex min-h-screen flex-col transition-[margin-left] duration-200 ease-in-out',
          // Mobile: no margin (sidebar is overlay)
          'ml-0',
          // Desktop: margin based on sidebar state
          isExpanded ? 'lg:ml-[240px]' : 'lg:ml-[64px]'
        )}
      >
        <Header locale={locale} />

        <main className="flex-1 p-4 md:p-6 lg:p-8">
          <PageTransition>{children}</PageTransition>
        </main>
      </div>
    </div>
  );
}
