import {
  Badge,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
} from "@chakra-ui/react";
import React, { useContext } from "react";
import Approved from "./Approved";
import Pending from "./Pending";
import Rejected from "./Rejected";
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";

const IOTransaction = () => {
  const { IODetails } = useContext(GlobalStateContext);
  return (
    <Tabs>
      <TabList>
        <Tab
          fontSize={"sm"}
          _selected={{
            color: "#004118",
            borderBottom: "2px solid #38a169",
          }}
        >
          Approved
        </Tab>
        <Tab
          fontSize={"sm"}
          _selected={{
            color: "#004118",
            borderBottom: "2px solid #38a169",
          }}
        >
          Pending
          {IODetails?.ioTransactionRecords?.Pending.length > 0 && (
            <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
              {IODetails?.ioTransactionRecords?.Pending.length || 0}
            </Badge>
          )}
        </Tab>
        <Tab
          fontSize={"sm"}
          _selected={{
            color: "#004118",
            borderBottom: "2px solid #38a169",
          }}
        >
          Rejected
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <Approved />
        </TabPanel>
        <TabPanel>
          <Pending />
        </TabPanel>
        <TabPanel>
          <Rejected />
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

export default IOTransaction;
