import { TabContext, TabPanel } from "@mui/lab";
import { Tab, Tabs } from "@mui/material";
import { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SlaughterArchivedFees } from "../slaughter-archived-fees/SlaughterArchivedFees";
import { SlaughterPaidFees } from "../slaughter-paid-fees/SlaughterPaidFees";
import { SlaughterUnpaidFees } from "../slaughter-unpaid-fees/SlaughterUnpaidFees";

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

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

  return (
    <Grid>
      <Grid container alignItems="center" justifyContent="center">
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={tabValue}
          onChange={handleTabChange}
        >
          <Tab label="تسویه نشده" value="1" />
          <Tab label="تسویه شده" value="2" />
          <Tab label="بایگانی" value="3" />
        </Tabs>
      </Grid>
      <TabContext value={tabValue}>
        <TabPanel value="1">
          <SlaughterUnpaidFees />
        </TabPanel>
        <TabPanel value="2">
          <SlaughterPaidFees />
        </TabPanel>
        <TabPanel value="3">
          <SlaughterArchivedFees />
        </TabPanel>
      </TabContext>
    </Grid>
  );
};
