import React from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import CourseActionFormTabContent from './CoursesActionModal';
import MyCoursesListTabContent from './MyCoursesListTabContent';
import EnrolledCourseTabContent from './EnrolledCourseList';

const MyCoursesWrapper = () => {
  return (
    <div className="container mx-auto py-8">
      <Tabs defaultValue="my-courses" className="flex gap-6 min-h-[50vh]">
        <div className="min-w-[240px]">
          <TabsList className="flex flex-col h-auto bg-transparent p-0">
            <TabsTrigger 
              value="my-courses" 
              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md"
            >
              My Courses
            </TabsTrigger>
            <TabsTrigger 
              value="enrolled" 
              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md"
            >
              Enrolled Course
            </TabsTrigger>
            <TabsTrigger
              value="action-form"
              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md "
            >
              Course action
            </TabsTrigger>
            
            
          </TabsList>
        </div>

        <div className="flex-1">
        <TabsContent value="my-courses" className="mt-0">
            <MyCoursesListTabContent />
          </TabsContent>
          <TabsContent value="enrolled" className="mt-0">
            <EnrolledCourseTabContent />
          </TabsContent>
          <TabsContent value="action-form" className="mt-0">
            <CourseActionFormTabContent />
          </TabsContent>
        </div>
      </Tabs>
    </div>
  );
};

export default MyCoursesWrapper;