import { NavigationWrapper } from '@/components/layout';
import { OctokitProviderWithRouter } from '@/context';
import { useToast } from '@/hooks/use-toast';
import { cn } from '@/lib/utils';
import { ThemeProvider } from 'next-themes';
import { ComponentPropsWithoutRef, useEffect } from 'react';
import { Outlet } from 'react-router-dom';

export interface DashboardLayoutProps
  extends ComponentPropsWithoutRef<'section'> {}

/**
 * DashboardLayout Component
 *
 * This component provides the layout for the dashboard, including navigation and theming.
 *
 * @param {DashboardLayoutProps} props - The props for the DashboardLayout component.
 * @returns {React.ReactNode} - The DashboardLayout component.
 */
export const DashboardLayout = ({
  className,
  ...props
}: DashboardLayoutProps) => {
  const { toast } = useToast();
  useEffect(() => {
    console.log('DashboardLayout');
    toast({
      title: 'DashboardLayout',
      variant: 'default',
    });
  }, []);

  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <section {...props} className={cn('h-full', className)}>
        <OctokitProviderWithRouter>
          <NavigationWrapper>
            <Outlet />
            
          </NavigationWrapper>
        </OctokitProviderWithRouter>
      </section>
    </ThemeProvider>
  );
};