import { useState } from "react";
import { Grid } from "../components/Grid/Grid";
import Tabs from "../components/Tab/Tab";
import TagActiveDistributions from "../partials/tagging/TagActiveDistributions";
import TagCanceledDistributions from "../partials/tagging/TagCanceledDistributions";

export default function TagDistribtution() {
  const [selectedTab, setSelectedTab] = useState<number>(0);
  const handleTabChange = (index: number) => {
    setSelectedTab(index);
  };

  const tabItems = [
    {
      label: "توزیع فعال",
      page: "tag_distribution",
      access: "Tag-Distribution-Actives",
    },
    {
      label: "توزیع های لغو شده",
      page: "tag_distribution",
      access: "Tag-Distribution-Cancels",
    },
  ];

  return (
    <Grid container column className="justify-center mt-2">
      <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
      <Grid container column className="mt-2">
        {selectedTab === 0 ? (
          <TagActiveDistributions />
        ) : (
          <TagCanceledDistributions />
        )}
      </Grid>
    </Grid>
  );
}
