import { useLocation } from 'react-router-dom';
import { cn } from '@crux-kit/utils';
import { LayoutNames } from '#app/config/types';
import { useSettings } from '#app/providers/SettingsProvider';
import { SidebarHeader } from './SidebarHeader';
import { SidebarMenu } from './SidebarMenu';

export function Sidebar() {
  const { settings } = useSettings();
  const { pathname } = useLocation();

  return (
    <div
      className={cn(
        'sidebar bg-background lg:border-border shrink-0 flex-col items-stretch lg:fixed lg:top-0 lg:bottom-0 lg:z-20 lg:flex lg:border-e',
        (settings.layouts[LayoutNames.DEFAULT].sidebarTheme === 'dark' ||
          pathname.includes('dark-sidebar')) &&
          'dark'
      )}
    >
      <SidebarHeader />
      <div className="overflow-hidden">
        <div className="w-(--sidebar-default-width)">
          <SidebarMenu />
        </div>
      </div>
    </div>
  );
}