import ActionButton from "../actionButton/ActionButton";
import DeleteIcon from "../icons/delete";
import FileIcon from "../icons/file";
import editUserStyle from "./styles.module.css";
import React from "react";

const Permissions = ({ sampleData = [] }) => {
  return (
    <>
      {/* Permissions */}
      <div className={editUserStyle.userPermissions}>
        {/* Add permissions */}
        <div className={editUserStyle.imanginaryDiv}></div>
        <div className={editUserStyle.permissionsContainer}>
          {/* Header */}
          <div className={editUserStyle.permissionsHeader}>
            <p>Permissions</p>
            <div className={editUserStyle.svgContainer}>
              <div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width={24}
                  height={24}
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M12 5.29199V18.7087"
                    stroke="#333649"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M5.29102 12H18.7077"
                    stroke="#333649"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
            </div>
          </div>

          {sampleData.length === 0 ? (
            // Default Message
            <div className={editUserStyle.permissionDefaultState}>
              <p>No permission added yet</p>
            </div>
          ) : (
            // Sampple Data(static)
            sampleData.map((perm, index) => {
              return (
                <div className={editUserStyle.permissions} key={index}>
                  <div className={editUserStyle.permissionsItem}>
                    <FileIcon />
                    <p>{perm.permission}</p>
                  </div>
                  <div className={editUserStyle.deleteBtn}>
                    <ActionButton icon={<DeleteIcon />} />
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </>
  );
};

export default Permissions;