import React, { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs } from "@mui/material";
import { ProvinceDispenserAcceptedSaleWithInProvince } from "../province-dispenser-accepted-sale-with-in-province/ProvinceDispenserAcceptedSaleWithInProvince";
import { ProvinceDispenserRejectedSaleWithInProvince } from "../province-dispenser-rejected-sale-with-in-province/ProvinceDispenserRejectedSaleWithInProvince";
import { ProvinceDispenserReturnedSaleWithInProvince } from "../province-dispenser-returned-sale-with-in-province/ProvinceDispenserReturnedSaleWithInProvince";

export const ProvinceDispenserSaleWithInProvince = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Grid container xs={12} justifyContent="center" alignItems="center">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
        >
          <Tab label="تایید شده" />
          <Tab label="حذف شده" />
          <Tab label="برگشت خورده" />
        </Tabs>
      </Grid>

      <Grid container xs={12} justifyContent="center">
        {value === 0 && <ProvinceDispenserAcceptedSaleWithInProvince />}
        {value === 1 && <ProvinceDispenserRejectedSaleWithInProvince />}
        {value === 2 && <ProvinceDispenserReturnedSaleWithInProvince />}
      </Grid>
    </Grid>
  );
};
