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";
import PlusIcon from "../icons/plus";

const Permissions = ({ sampleData = [] }) => {
  return (
    <>
      {/* Permissions */}
      <div className={editUserStyle.permissionsContainer}>
        <div className={editUserStyle.permissionsHeader}>
          <p>Permissions</p>
          <div className={editUserStyle.svgContainer}>
            {/* Button ni */}
            <button>
              <PlusIcon />
            </button>
          </div>
        </div>

        {sampleData.length === 0 ? (
          <div className={editUserStyle.permissionDefaultState}>
            <p>No permission added yet</p>
          </div>
        ) : (
          <div className={editUserStyle.permissionsList}>
            {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;