import React from 'react';
import { UserProvider } from './contexts/UserContext';
import { LearningProvider } from './contexts/LearningContext';
import Layout from './components/shared/Layout';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import AITutor from './components/ai-tutor/ChatInterface';
import LearningPaths from './components/learning-paths/PathCard';
import CodePlayground from './components/code-playground/CodeEditor';

const App: React.FC = () => {
  return (
    <UserProvider>
      <LearningProvider>
        <Layout>
          <div className="min-h-screen bg-gray-50">
            <Tabs defaultValue="learning" className="w-full">
              <TabsList className="w-full justify-start">
                <TabsTrigger value="learning">📚 Learning Paths</TabsTrigger>
                <TabsTrigger value="tutor">🤖 AI Tutor</TabsTrigger>
                <TabsTrigger value="playground">💻 Code Playground</TabsTrigger>
              </TabsList>

              <TabsContent value="learning">
                <LearningPaths />
              </TabsContent>

              <TabsContent value="tutor">
                <AITutor />
              </TabsContent>

              <TabsContent value="playground">
                <CodePlayground />
              </TabsContent>
            </Tabs>
          </div>
        </Layout>
      </LearningProvider>
    </UserProvider>
  );
};

export default App;