import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
const CredentialsPage = () => {
  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}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
          <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>
                          <button className={styles.iconButton}>
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width={20}
                              height={20}
                              viewBox="0 0 20 20"
                              fill="none"
                            >
                              <path
                                d="M3.61133 6.00684H16.3891"
                                stroke="#969AF9"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M8.40234 9.20117V13.9928"
                                stroke="#969AF9"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M11.5977 9.20117V13.9928"
                                stroke="#969AF9"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
                                stroke="#969AF9"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
                                stroke="#969AF9"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                            </svg>
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CredentialsPage;
