import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import addRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import Permissions from "@/app/components/permissions/Permissions";

const page = () => {
  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Add Role"
            state="add"
            requiredButtons={["title", "save"]}
          />
          <div className={addRoleStyle.addRoleContainer}>
            {/* Input fields Container  */}
            <div className={addRoleStyle.inputFieldContainer}>
              {/* User Details */}
              <div className={addRoleStyle.roleDetails}>
                {/* Header */}
                <div className={addRoleStyle.header}>
                  <div>
                    <p>Role Details</p>
                  </div>
                </div>
                {/* Input fields */}
                <form className={addRoleStyle.fields}>
                  {/* Email */}
                  <div className={addRoleStyle.inputMainContainer}>
                    <div className={addRoleStyle.inputContainer}>
                      {/* Label */}
                      <div className={addRoleStyle.label}>
                        <p>Name</p>
                      </div>
                      {/* Input field */}
                      <div className={addRoleStyle.inputField}>
                        <TextField placeHolder="Enter name" />
                      </div>
                    </div>
                  </div>
                  {/* Full Name */}
                  <div className={addRoleStyle.inputMainContainer}>
                    <div className={addRoleStyle.inputContainer}>
                      {/* Label */}
                      <div className={addRoleStyle.label}>
                        <p>Organization ID</p>
                      </div>
                      {/* Input field */}
                      <div className={addRoleStyle.inputField}>
                        <TextField placeHolder="Enter organization ID" />
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              {/* Permissions */}
              <Permissions />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default page;