Untitled

import React from "react";
import {
  Flex,
  HStack,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Table,
  Tbody,
  Td,
  Text,
  Th,
  Thead,
  Tr,
} from "@chakra-ui/react";
import { PiCaretUpDownFill } from "react-icons/pi";

import { AnchorText, RefDomain } from "@/interface/SiteAnalyserInterface";

const SiteANalyserTable = ({ data, boolean, setfilter }: any) => {
  return (
    <>
      {boolean === "refDomain" ? (
        <Table colorScheme="table" variant={"striped"}>
          <Thead>
            <Tr>
              <Th>
                <HStack>
                  <Text className="siteTableHead">REFERING DOMAIN</Text>
                  <PiCaretUpDownFill color="#A3AED0" />
                </HStack>
              </Th>
              <Th>
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">CF</Text>{" "}
                      {<PiCaretUpDownFill color="#A3AED0" />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("refDomain CF Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("refDomain CF Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
              <Th>
                {" "}
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">TF</Text>{" "}
                      {<PiCaretUpDownFill color="#A3AED0" />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("refDomain TF Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("refDomain TF Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
              <Th>
                {" "}
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">LINKS</Text>{" "}
                      {<PiCaretUpDownFill color="#A3AED0" />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("refDomain Links Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("refDomain Links Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
            </Tr>
          </Thead>
          <Tbody>
            {data?.map((item: RefDomain) => {
              return (
                <Tr key={item.Domain}>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                  >
                    {item.Domain}
                  </Td>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                    fontFamily={"DM Sans, sans-serif"}
                  >
                    {item.CitationFlow}
                  </Td>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                    fontFamily={"DM Sans, sans-serif"}
                  >
                    {item.TrustFlow}
                  </Td>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                    fontFamily={"DM Sans, sans-serif"}
                  >
                    {item.RefDomains}
                  </Td>
                </Tr>
              );
            })}
          </Tbody>
        </Table>
      ) : (
        <Table variant={"striped"} colorScheme="table">
          <Thead>
            <Tr>
              <Th>
                <HStack>
                  <Text className="siteTableHead">ANCHOR TEXT</Text>
                  <PiCaretUpDownFill />
                </HStack>
              </Th>
              <Th>
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">REF DOMAIN</Text>{" "}
                      {<PiCaretUpDownFill />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText refDomain Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText refDomain Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
              <Th>
                {" "}
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">TOTAL LINKS</Text>{" "}
                      {<PiCaretUpDownFill />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText DeletedLinks Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText TotalLinks Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
              <Th>
                {" "}
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">DELETED LINKS</Text>{" "}
                      {<PiCaretUpDownFill />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText DeletedLinks Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText DeletedLinks Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
              <Th>
                {" "}
                <Menu>
                  <MenuButton>
                    <Flex align={"center"}>
                      <Text className="siteTableHead">NO FOLLOW LINKS</Text>{" "}
                      {<PiCaretUpDownFill />}
                    </Flex>
                  </MenuButton>
                  <MenuList>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText NofollowLinks Asc")}
                    >
                      Ascending
                    </MenuItem>
                    <MenuItem
                      fontSize={"14px"}
                      onClick={() => setfilter("anchorText NofollowLinks Desc")}
                    >
                      Descending
                    </MenuItem>
                  </MenuList>
                </Menu>
              </Th>
            </Tr>
          </Thead>
          <Tbody>
            {data?.map((item: AnchorText) => {
              return (
                <Tr
                  ml={"100px"}
                  style={{ paddingLeft: "100px" }}
                  key={item.AnchorText}
                >
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                  >
                    {item?.AnchorText || "N/A"}
                  </Td>
                  <Td fontWeight={"700"} color={"#2B3674"} fontSize={"14px"}>
                    {item.RefDomains}
                  </Td>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                  >
                    {item.TotalLinks}
                  </Td>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                  >
                    {item.DeletedLinks}
                  </Td>
                  <Td
                    fontWeight={"700"}
                    border={"none"}
                    color={"#2B3674"}
                    fontSize={"14px"}
                  >
                    {item.NoFollowLinks}
                  </Td>
                </Tr>
              );
            })}
          </Tbody>
        </Table>
      )}
    </>
  );
};

export default SiteANalyserTable;