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

export const SlaughterHouseDelegates = () => {
  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} />
      </Tabs>

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