import React from 'react';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import UserTabContent from './UserTabContent';
import UserEmailUpdateTabContent from './UserEmailUpdateTabContent';
import UserPasswordUpdateTabContent from './UserPasswordUpdateTabContent';

const ProfileSettings = () => {
  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="general" 
              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">
            <UserTabContent />
          </TabsContent>
          <UserEmailUpdateTabContent />
          <UserPasswordUpdateTabContent />

          <TabsContent value="account" className="mt-0">
            <Card>
              <CardHeader>
                <CardTitle>Account</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Account settings coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="appearance" className="mt-0">
            <Card>
              <CardHeader>
                <CardTitle>Appearance</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Appearance settings coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="notifications" className="mt-0">
            <Card>
              <CardHeader>
                <CardTitle>Notifications</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Notification settings coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="display" className="mt-0">
            <Card>
              <CardHeader>
                <CardTitle>Display</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Display settings coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>
        </div>
      </Tabs>
    </div>
  );
};

export default ProfileSettings;