'use client';

import { useState } from 'react';
import Navbar  from '@/components/Navbar';
import Sidebar from '@/components/Sidebar';
import type { JWTPayload } from '@/lib/types';

interface Props {
  user:     Pick<JWTPayload, 'username' | 'role'>;
  children: React.ReactNode;
}

export default function DashboardShell({ user, children }: Props) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex h-full flex-col">
      <Navbar user={user} onMenuToggle={() => setSidebarOpen(true)} />
      <div className="flex flex-1 overflow-hidden">
        <Sidebar
          isAdmin={user.role === 'admin'}
          isOpen={sidebarOpen}
          onClose={() => setSidebarOpen(false)}
        />
        <main className="flex-1 overflow-y-auto">
          {children}
        </main>
      </div>
    </div>
  );
}