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

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

const manageUser: any[] = [
  ...Array.from({ length: 12 }, (_, i) => ({
    "Sr. No": i + 1,
    "First Name": "Ritesh",
    "Last Name": "akanksha@gmail.com",
    "Company name": "9876543210",
    "Activate/Deactivate": (
      <Box display={'flex'} justifyContent={'center'}>
        <Switch colorPalette={'teal'} />
      </Box>
    ),
  })),
];

const DeactivatedAccounts = () => {
  return (
    <MainFrame>
      <Box>
      <HStack
          w={"100%"}
          justifyContent={"space-between"}
          mb={4}
          py={0}
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
             Deactivated User Accounts
          </Text>

          <HStack>
            <InputGroup
              startElement={
                <LuSearch fontSize={"xs"}  style={{position:'relative',left:'10px'}} />
              }
              color={"#000"}
            >
              <Input
                p={4}
                w={300}
                bg={"#fff"}
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
                size={"2xs"}
                fontSize={"2sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
              />
            </InputGroup>
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
          data={manageUser}
        />
      </Box>
    </MainFrame>
  );
};

export default DeactivatedAccounts;
