import React, { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Tab, Tabs } from "@mui/material";
import { ProvinceSubSectorCitySharesWageDetails } from "../province-sub-sector-city-shares-wage-details/ProvinceSubSectorCitySharesWageDetails";
import { ProvinceSubSectorCitySharesDeposits } from "../province-sub-sector-city-shares-deposits/ProvinceSubSectorCitySharesDeposits";
import { ProvinceSubSectorCitySharesShares } from "../province-sub-sector-city-shares-shares/ProvinceSubSectorCitySharesShares";

export const ProvinceSubSectorCityShares = () => {
  const [selectedTab, setSelectedTab] = useState(0);

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

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        mb={SPACING.MEDIUM}
        mt={SPACING.SMALL}
        xs={12}
      >
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={selectedTab}
          onChange={handleTabChange}
        >
          <Tab label="جزئیات تعرفه" />
          <Tab label="واریزی ها" />
          <Tab label="سهم بندی" />
        </Tabs>
      </Grid>

      {selectedTab === 0 && <ProvinceSubSectorCitySharesWageDetails />}
      {selectedTab === 1 && <ProvinceSubSectorCitySharesDeposits />}
      {selectedTab === 2 && <ProvinceSubSectorCitySharesShares />}
    </Grid>
  );
};
