import React from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs } from "@mui/material";
import { ProvinceDispensersView } from "../province-dispensers-view/ProvinceDispensersView";

export const ProvinceDispensersViewKillHouse = ({ key, name }) => {
  const [value, setValue] = React.useState("0");

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

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="secondary tabs example"
      >
        <Tab value="0" label="مباشرین" />
        <Tab value="1" label="اصناف" />
      </Tabs>

      {value === "0" && (
        <ProvinceDispensersView type="steward" roleType="KillHouse" />
      )}
      {value === "1" && (
        <ProvinceDispensersView type="guild" roleType="KillHouse" />
      )}
    </Grid>
  );
};
