import React, { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs, Box } from "@mui/material";
import { AllDispensersTab } from "./AllDispensersTab";
import { KillHouseDispensersTab } from "./KillHouseDispensersTab";
import { StewardDispensersTab } from "./StewardDispensersTab";

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

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center" gap={2}>
      <Tabs value={value} onChange={handleChange}>
        <Tab label="کل توزیع کنندگان" value={0} />
        <Tab label="توزیع کنندگان کشتارگاه‌ها" value={1} />
        <Tab label="توزیع کنندگان مباشرین" value={2} />
      </Tabs>

      <Box sx={{ width: "100%", mt: 2 }}>
        {value === 0 && <AllDispensersTab />}
        {value === 1 && <KillHouseDispensersTab />}
        {value === 2 && <StewardDispensersTab />}
      </Box>
    </Grid>
  );
};
