"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 DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
const CredentialsPage = () => {
  const isMobile = useIsMobile();
  const sampleData = [
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
    {
      name: "mongo tls ca crt",
      organizationID: "67160a5ae69144ff19aafb86",
    },
  ];
  return (
    <div className={globalStyle.section}>
      <SuccessToast message="New Credential added successfully!" />
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Add Credentials"
            topbarTitle="Credentials"
            requiredButtons={["title", "add", "search", "env"]}
          />
          {isMobile ? (
            <div className={styles.cardContainer}>
              <MobileSearchBar />
              {sampleData.map((data, key) => (
                <Card data={data} key={key} />
              ))}
            </div>
          ) : (
            <div className={styles.tableContainer}>
              <table className={styles.table}>
                <thead>
                  <tr>
                    <th width="45%">Name</th>
                    <th width="45%">Organization ID</th>
                    <th width="10%"></th>
                  </tr>
                </thead>

                <tbody>
                  {sampleData.map((org, index) => {
                    return (
                      <tr key={index}>
                        <td>{org.name}</td>
                        <td>{org.organizationID}</td>
                        <td className={styles.actions}>
                          <div>
                            <ActionButton icon={<DeleteIcon />} />
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default CredentialsPage;