import { useState } from "react";
import { CityHatchingsArchive } from "../../../city/components/city-hatchings-archive/CityHatchingsArchive";
import { CityHatchings } from "../../../city/components/city-hatchings/CityHatchings";
import { Tab, Tabs } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { CityHatchingInfo } from "../../../city/components/city-hatching-info/CityHatchingInfo";

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

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Grid container alignItems="center" justifyContent="center">
      <Grid xs={12} container alignItems="center" justifyContent="center">
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={value}
          onChange={handleChange}
        >
          <Tab label="جوجه ریزی" value={0} />
          <Tab label="بایگانی" value={1} />
          <Tab label="آمار جوجه ریزی" value={2} />
        </Tabs>
      </Grid>

      {value === 0 && <CityHatchings readOnly={true} />}
      {value === 1 && <CityHatchingsArchive readOnly={true} />}
      {value === 2 && <CityHatchingInfo />}
    </Grid>
  );
};
