import { Box, Tab, Tabs } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { BackButton } from "../../../../components/back-button/BackButton";
import { useState } from "react";
import { ProvinceDispensersStockSlugActive } from "./ProvinceDispensersStockSlugActive";
import { ProvinceDispensersStockSlugArchive } from "./ProvinceDispensersStockSlugArchive";

const ProvinceDispensersStockSlug = () => {
  const [value, setValue] = useState("active");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        justifyContent="center"
        gap={SPACING.SMALL}
        p={SPACING.SMALL}
        direction="column"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Grid container>
          <BackButton />
        </Grid>
        <Grid
          container
          justifyContent="center"
          direction="column"
          alignItems="center"
        >
          <Tabs
            value={value}
            onChange={handleChange}
            aria-label="dispensers stock slug tabs"
            scrollButtons="auto"
            variant="scrollable"
            allowScrollButtonsMobile
          >
            <Tab label="فعال" value="active" />
            <Tab label="بایگانی" value="archive" />
          </Tabs>
          <Grid container justifyContent="center" px={2} py={3}>
            {value === "active" && <ProvinceDispensersStockSlugActive />}
            {value === "archive" && <ProvinceDispensersStockSlugArchive />}
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ProvinceDispensersStockSlug;
