import { useState } from "react";
import { Grid } from "../components/Grid/Grid";
import Tabs from "../components/Tab/Tab";
import Pages from "../partials/Admin/Pages";
import Access from "../partials/Admin/Access";
import UnusedAccess from "../partials/Admin/UnusedAccess";

const tabItems = [
  { label: "صفحات" },
  { label: "دسترسی ها" },
  { label: "دسترسی های غیر فعال" },
];

export default function Management() {
  const [selectedTab, setSelectedTab] = useState<number>(0);
  const handleTabChange = (index: number) => {
    setSelectedTab(index);
  };

  return (
    <Grid container column className="justify-center mt-2">
      <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
      <Grid container column className="mt-2">
        {selectedTab === 0 && <Pages />}
        {selectedTab === 1 && <Access />}
        {selectedTab === 2 && <UnusedAccess />}
      </Grid>
    </Grid>
  );
}