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

import { ProvinceSendLetterDailySlaughter } from "../province-send-letter-daily-slaughter/ProvinceSendLetterDailySlaughter";
import { ProvinceSendLetterTransferSlaughter } from "../province-send-letter-transfer-slaughter/ProvinceSendLetterTransferSlaughter";
import { ProvinceSendLetterDeclarationNeed } from "../province-send-letter-declaration-need/ProvinceSendLetterDeclarationNeed";

export const ProvinceSendLetter = () => {
  const [tabValue, setTabValue] = useState("1");

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };

  return (
    <Grid xs={12}>
      <Grid container alignItems="center" justifyContent="center" xs={12}>
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={tabValue}
          onChange={handleTabChange}
        >
          <Tab label="گزارش کشتار روزانه" value="1" />
          <Tab label="صدور حواله کشتار" value="2" />
          <Tab label="گزارش اعلام کشتار مرغدار" value="3" />
        </Tabs>
      </Grid>
      <Grid xs={12}>
        {tabValue === "1" && <ProvinceSendLetterDailySlaughter />}
        {tabValue === "2" && <ProvinceSendLetterTransferSlaughter />}
        {tabValue === "3" && <ProvinceSendLetterDeclarationNeed />}
      </Grid>
    </Grid>
  );
};
