import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { BrowserRouter as Router } from 'react-router-dom';

import { ErrorBoundary } from '@/components/ErrorBoundary';
import Layout from '@/components/Layout';
import AppRouter from '@/components/router/AppRouter';
import { Toaster } from '@/components/ui/sonner';
import { queryClient } from '@/lib/queryClient';

export default function App() {
  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <Router>
          <Layout>
            <AppRouter />
          </Layout>
          <Toaster />
        </Router>
        {/* Show React Query DevTools in development */}
        {process.env.NODE_ENV === 'development' && (
          <ReactQueryDevtools initialIsOpen={false} />
        )}
      </QueryClientProvider>
    </ErrorBoundary>
  );
}