import React from 'react';
import { Outlet } from 'react-router-dom';
import SidebarAccountant from '../shared/components/SidebarAccountant';
import InAppNotificationBell from '../features/notifications/components/InAppNotificationBell';
import { useResponsive } from '../shared/hooks/useResponsive';

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

  return (
    <div className="flex h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
      {/* Sidebar */}
      <SidebarAccountant />
      
      {/* Main Content */}
      <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>
    </div>
  );
};

export default AccountantLayout;

