import { Tab, Tabs } from "@mui/material";
import { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { ProvinceAutoAllocationArchive } from "../province-auto-allocation-archive/ProvinceAutoAllocationArchive";
import { ProvinceAutoAllocationRequests } from "../province-auto-allocation-requests/ProvinceAutoAllocationRequests";
import { ProvinceSlaughterhouseQuota } from "../province-slaughterhouse-quota/ProvinceSlaughterhouseQuota";

export const ProvinceAutoAllocation = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  return (
    <Grid container justifyContent="center" xs={12}>
      <Grid container xs={12} justifyContent="center">
        <Tabs
          value={activeTab}
          onChange={handleTabChange}
          aria-label="simple tabs example"
        >
          <Tab label="تخصیص خودکار" />
          <Tab label="سهم بندی کشتارگاه" />
          <Tab label="بایگانی" />
        </Tabs>
      </Grid>
      {activeTab === 0 && <ProvinceAutoAllocationRequests />}
      {activeTab === 1 && <ProvinceSlaughterhouseQuota />}
      {activeTab === 2 && <ProvinceAutoAllocationArchive />}
    </Grid>
  );
};
