import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import addUserStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
const page = () => {
  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Add User"
            state="add"
            requiredButtons={["title", "save"]}
          />
          <div className={addUserStyle.addUserContainer}>
            {/* Input fields Container  */}
            <div className={addUserStyle.inputFieldContainer}>
              {/* User Details */}
              <div className={addUserStyle.userDetails}>
                {/* Header */}
                <div className={addUserStyle.header}>
                  <div>
                    <p>User Details</p>
                  </div>
                </div>
                {/* Input fields */}
                <form className={addUserStyle.fields}>
                  {/* Role and Dropdown */}
                  <SelectField
                    label="Select Role"
                    options={[
                      { label: "Option", value: "Option" },
                      { label: "Option 1", value: "Option 1" },
                      { label: "Option 2", value: "Option 2" },
                    ]}
                  />
                  {/* Email */}
                  <div className={addUserStyle.inputMainContainer}>
                    <div className={addUserStyle.inputContainer}>
                      {/* Label */}
                      <div className={addUserStyle.label}>
                        <p>Email</p>
                      </div>
                      {/* Input field */}
                      <div className={addUserStyle.inputField}>
                        <TextField placeHolder="Enter email" />
                      </div>
                    </div>
                  </div>
                  {/* Full Name */}
                  <div className={addUserStyle.inputMainContainer}>
                    <div className={addUserStyle.inputContainer}>
                      {/* Label */}
                      <div className={addUserStyle.label}>
                        <p>Full Name</p>
                      </div>
                      {/* Input field */}
                      <div className={addUserStyle.inputField}>
                        <TextField placeHolder="Enter full name" />
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              {/* Permissions */}
              <div className={addUserStyle.userPermissions}>
                {/* Add permissions */}
                <div className={addUserStyle.permissionsContainer}>
                  {/* Header */}
                  <div className={addUserStyle.permissionsHeader}>
                    <p>Permissions</p>
                    <div className={addUserStyle.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>

                  {/* State text (static) */}
                  <div className={addUserStyle.permissionDefaultState}>
                    <p>No permission added yet</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default page;
