'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/store/authStore';
import DashboardSidebar from './DashboardSidebar';
import DashboardTopBar from './DashboardTopBar';
import DashboardPageTransition from './DashboardPageTransition';

export default function DashboardShell({ children, title, subtitle }: { children: React.ReactNode; title: string; subtitle?: string }) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="min-h-screen flex" dir="rtl" style={{ background: '#F8FAFC', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
      <DashboardSidebar collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
      <div className="flex-1 flex flex-col transition-all duration-300" style={{ marginRight: collapsed ? '72px' : '240px' }}>
        <DashboardTopBar title={title} subtitle={subtitle} />
        <main className="flex-1 p-8 overflow-auto">
          <DashboardPageTransition>{children}</DashboardPageTransition>
        </main>
      </div>
    </div>
  );
}