"use client";

import React, { useState } from "react";
import { Box, Typography } from "@mui/material";
import SettingsAccountSecurity from "./SettingsAccountSecurity";
import SettingsPersonalInfo from "./SettingsPersonalInfo";
import SettingsSidebar from "./SettingsSidebar";

const SettingsPageClient: React.FC = () => {
  const [activeSection, setActiveSection] = useState<"personal" | "account">(
    "personal"
  );

  return (
    <Box sx={{ p: 3, display: "flex", flexDirection: "column", gap: 3 }}>
      <Typography variant="h5" fontWeight={600}>
        Settings
      </Typography>

      <Box sx={{ display: "flex", gap: 3 }}>
        <SettingsSidebar
          active={activeSection}
          onChange={(section: "personal" | "account") =>
            setActiveSection(section)
          }
        />

        <Box sx={{ flex: 1 }}>
          {activeSection === "personal" && <SettingsPersonalInfo />}
          {activeSection === "account" && <SettingsAccountSecurity />}
        </Box>
      </Box>
    </Box>
  );
};

export default SettingsPageClient;