'use client';

import { Header } from './header';
import { BottomNavigation } from './bottom-navigation';
import { studentNavItems, teacherNavItems, adminNavItems } from '@/constants/navigation';
import { ROLES } from '@/constants/roles';
import type { UserRole } from '@/types';

interface AppLayoutProps {
  children: React.ReactNode;
  role: UserRole;
}

export function AppLayout({ children, role }: AppLayoutProps) {
  const isAdmin = role === ROLES.ADMIN;
  const isTeacher = role === ROLES.TEACHER;

  const navItems = isAdmin
    ? adminNavItems
    : isTeacher
    ? teacherNavItems
    : studentNavItems;

  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1 pb-20 lg:pb-6">
        <div className="mx-auto max-w-2xl px-4 py-4 md:max-w-7xl md:px-6">
          {children}
        </div>
      </main>
      <BottomNavigation items={navItems} />
    </div>
  );
}