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

const MyCoursesWrapper = () => {
  return (
    <div className="container mx-auto py-8">
      <Tabs defaultValue="general" 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="generali"
              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 "
            >
              Profile
            </TabsTrigger>
            <TabsTrigger 
              value="email" 
              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"
            >
              Account
            </TabsTrigger>
            <TabsTrigger 
              value="password" 
              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"
            >
              Security
            </TabsTrigger>
          </TabsList>
        </div>

        <div className="flex-1">
          <TabsContent value="general" className="mt-0">
            {/* <MyCoursesActionContent /> */}
            <CourseActionFormTabContent />
          </TabsContent>
          {/* <UserEmailUpdateTabContent />
          <UserPasswordUpdateTabContent /> */}
        </div>
      </Tabs>
    </div>
  );
};

export default MyCoursesWrapper;