'use client';

import { useState } from 'react';
import SettingsMenu from '@/components/settings/SettingsMenu';
import SecurityPage from '@/components/settings/SecurityPage';
import ProfilePage from '@/components/settings/ProfilePage';

export default function Settings() {
    const [tab, setTab] = useState('profile');

    return (
        <div className="flex flex-row gap-[250px] w-full max-w-[1500px] ">
            <SettingsMenu tab={tab} setTab={setTab} />

            <div className="flex-1">
                {tab === 'profile' && <ProfilePage />}
                {tab === 'security' && <SecurityPage />}
            </div>
        </div>
    );
}