"use-client";
import React from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";

const OrganizationPage = () => {
  const sampleData = [
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
    {
      organizationName: "Project Moonshot Inc.",
      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
    },
  ];

  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader buttonText="Add Organization" topbarTitle="Organization" />
          <div className={styles.tableContainer}>
            <table className={styles.table}>
              <thead>
                <tr>
                  <th width="45%">Organization Name</th>
                  <th width="45%">Date Created</th>
                  <th width="10%"></th>
                </tr>
              </thead>

              <tbody>
                {sampleData.map((org, index) => {
                  return (
                    <tr key={index}>
                      <td>{org.organizationName}</td>
                      <td>{org.dateCreated}</td>
                      <td className={styles.actions}>
                        <div>
                          <button className={styles.iconButton}>
                            <DeleteIcon />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OrganizationPage;