import {
  Box,
  HStack,
  Input,
  Text
} from "@chakra-ui/react";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../../components/DataTable";
import MainFrame from "../../../components/MainFrame";
import { InputGroup } from "../../../components/ui/input-group";
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "../../../components/ui/pagination";
import { Switch } from "../../../components/ui/switch";

const tableHeadRow = [
  "Sr. No",
  "First Name",
  "Last Name",
  "Company name",
  "Activate/Deactivate",
];

const usersData = [
  ...Array.from({ length: 10 }, (_, i) => ({
    "Sr. No": i + 1,
    "First Name": "Ritesh",
    "Last Name": "Joshi",
    "Company name": "WDI",
    "Activate/Deactivate": (
      <HStack justifyContent="center">
        <Text>Yes</Text>
        <Switch size="sm" colorPalette="teal" />
        <Text>No</Text>
      </HStack>
    ),
  })),
];

const DeactivatedAccounts = () => {
  return (
    <MainFrame>
      <HStack w="100%" justifyContent="space-between" p={3}>
        <Text as="span" fontSize="sm" fontWeight="bolder" color="#000">
          Registered Users
        </Text>

        <Box w="30%">
          <InputGroup
            bgSize="xs"
            flex="1"
            startElement={<LuSearch />}
            w="100%"
            color="#000"
          >
            <Input
              w="100%"
              bg="#EEEEEE"
              _focus={{ border: "1px #02A0A0 solid" }}
              border="1px #EEEEEE solid"
              rounded="full"
              size="sm"
              placeholder="Search..."
            />
          </InputGroup>
        </Box>
      </HStack>

      <DataTable tableHeadRow={tableHeadRow} data={usersData} />

      <PaginationRoot
        p={4}
        mt={8}
        count={usersData.length}
        pageSize={3}
        defaultPage={1}
      >
        <HStack justifyContent="flex-end" mb={5}>
          <PaginationPrevTrigger />
          <PaginationItems />
          <PaginationNextTrigger />
        </HStack>
      </PaginationRoot>
    </MainFrame>
  );
};

export default DeactivatedAccounts;
