"use client";

import React from "react";
import {
  Paper,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
} from "@mui/material";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import SecurityIcon from "@mui/icons-material/Security";

interface Props {
  active: "personal" | "account";
  onChange: (section: "personal" | "account") => void;
}

const SettingsSidebar: React.FC<Props> = ({ active, onChange }) => {
  return (
    <Paper elevation={1} sx={{ width: 260, p: 1 }}>
      <List component="nav">
        <ListItemButton
          selected={active === "personal"}
          onClick={() => onChange("personal")}
        >
          <ListItemIcon>
            <AccountCircleIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Personal Info" />
        </ListItemButton>
        <ListItemButton
          selected={active === "account"}
          onClick={() => onChange("account")}
        >
          <ListItemIcon>
            <SecurityIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Account Security" />
        </ListItemButton>
      </List>
    </Paper>
  );
};

export default SettingsSidebar;