import React, { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { BackButton } from "../../../../components/back-button/BackButton";
import { Tab, Tabs } from "@mui/material";
import { ProvinceNationalInfoSlaughterhouse } from "../province-national-info-Slaughterhouse/ProvinceNationalInfoSlaughterhouse";
import { NationalInfoHatchings } from "../../../city/components/national-info-hatchings/NationalInfoHatchings";
import { ProvinceNationalInfoFarms } from "../province-national-info-farms/ProvinceNationalInfoFarms";
import { NationalInfoTransports } from "../../../city/components/national-info-bars/NationalInfoTransports";

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

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

  return (
    <Grid container xs={12} justifyContent="center">
      <Grid container xs={12}>
        <BackButton />
      </Grid>
      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        mt={2}
      >
        <Tabs
          value={value}
          onChange={handleChangeTab}
          aria-label="simple tabs example"
        >
          <Tab label="مدیریت فارم ها" />
          <Tab label=" جوجه ریزی ها" />
          <Tab label=" اطلاعات بار" />
          <Tab label="پایش کشتارگاه ها" />
        </Tabs>
      </Grid>

      <Grid mt={4}>
        {value === 0 && <ProvinceNationalInfoFarms />}
        {value === 1 && <NationalInfoHatchings />}
        {value === 2 && <NationalInfoTransports />}
        {value === 3 && <ProvinceNationalInfoSlaughterhouse />}
      </Grid>
    </Grid>
  );
};
