"use client";
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
import ViewIcon from "../components/icons/view";
import DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
import Card from "./user-card/Card";

const UsersPage = () => {
  const router = useRouter();
  const isMobile = useIsMobile();
  const sampleData = [
    {
      email: "nino.moonshot@gmail.com",
      fullName: "Nino Paul Cervantes",
      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
    },
    {
      email: "nino.moonshot@gmail.com",
      fullName: "Nino Paul Cervantes",
      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
    },
    {
      email: "nino.moonshot@gmail.com",
      fullName: "Nino Paul Cervantes",
      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
    },
  ];
  return (
    <div className={globalStyle.section}>
      <SuccessToast message="New User added successfully" />
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Add User"
            topbarTitle="Users"
            requiredButtons={["title", "add", "search"]}
          />

          <div className={styles.cardContainer}>
            <MobileSearchBar />
            {sampleData.map((user, index) => {
              return (
                <Card
                  user={user}
                  key={index}
                  onClick={() => router.push(`/users/${index}`)}
                />
              );
            })}
          </div>

          <div className={styles.tableContainer}>
            <table className={styles.table}>
              <thead className={styles.tableHeader}>
                <tr>
                  <th width="30%">Email</th>
                  <th width="30%">Full Name</th>
                  <th width="30%">Date Created</th>
                  <th></th>
                </tr>
              </thead>
              <tbody className={styles.tableBody}>
                {sampleData.map((user, index) => {
                  return (
                    <tr
                      key={index}
                      onClick={() => router.push(`/users/${index}`)}
                    >
                      <td>{user.email}</td>
                      <td>{user.fullName}</td>
                      <td>{user.createdAt}</td>
                      <td>
                        <div className={styles.tableActions}>
                          <ActionButton icon={<ViewIcon />} />
                          <ActionButton icon={<DeleteIcon />} />
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UsersPage;