import React from 'react';
import { Outlet } from 'react-router-dom';
import SidebarStaff from '../shared/components/SidebarStaff';
import StaffChatNotification from '../features/notifications/components/StaffChatNotification';
import InAppNotificationBell from '../features/notifications/components/InAppNotificationBell';
import { ChatNotificationProvider } from '../features/notifications/contexts/ChatNotificationContext';
import { useResponsive } from '../shared/hooks/useResponsive';

const StaffLayout: React.FC = () => {
  const { isMobile } = useResponsive();

  return (
    <ChatNotificationProvider>
      <div className="flex h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
        {}
        <SidebarStaff />
        
        {}
        <div className="flex-1 overflow-auto lg:ml-0">
          <div className={`min-h-screen ${isMobile ? 'pt-20' : 'pt-0'}`}>
            <Outlet />
          </div>
        </div>
        
        {/* Notification bell - fixed position in top right */}
        <div className="fixed top-4 right-4 z-50">
          <InAppNotificationBell />
        </div>
        
        {}
        <StaffChatNotification />
      </div>
    </ChatNotificationProvider>
  );
};

export default StaffLayout;

