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

// Table setup
const tableHeadRow = [
  "Sr. No",
  "First Name",
  "Mobile number",
  "Gender",
  "DOB",
  "Type of User",
  "Language",
  "Status",
  "Action",
];

const usersData: any[] = [
  {
    "Sr. No": 1,
    "First Name": "Ritesh",
    "Mobile number": "9876543210",
    Gender: "Male",
    DOB: "15-01-1990",
    "Type of User": "Admin",
    Language: "English",
    Status: "Active",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 2,
    "First Name": "Anjali",
    "Mobile number": "9123456789",
    Gender: "Female",
    DOB: "21-06-1995",
    "Type of User": "Customer",
    Language: "Hindi",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 3,
    "First Name": "Rajesh",
    "Mobile number": "9871234560",
    Gender: "Male",
    DOB: "12-12-1985",
    "Type of User": "Vendor",
    Language: "English",
    Status: "Active",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 4,
    "First Name": "Priya",
    "Mobile number": "9988776655",
    Gender: "Female",
    DOB: "05-05-1998",
    "Type of User": "Customer",
    Language: "Tamil",
    Status: "Active",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 5,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 6,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 7,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 5,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 6,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 7,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 8,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 9,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 10,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 11,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 12,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
  {
    "Sr. No": 13,
    "First Name": "Amit",
    "Mobile number": "8899665544",
    Gender: "Male",
    DOB: "03-03-1992",
    "Type of User": "Admin",
    Language: "Gujarati",
    Status: "Inactive",
    Action: "Edit/Delete",
  },
];

const RegisterUsers = () => {
  return (
    <MainFrame>
      <HStack   w={"100%"} justifyContent={"space-between"} p={3}>
        <Text as={"span"} fontSize={"sm"} fontWeight={"bolder"} color={"#000"}>
          Register User
        </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} />
    </MainFrame>
  );
};

export default RegisterUsers;
