import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import createCredStyle from "./styles.module.css";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";

const page = () => {
  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Create Credential"
            state="add"
          />
          {/* Create Crediantial Container */}
          <div className={createCredStyle.createCredContainer}>
            <TopToolTip />
            <div className={createCredStyle.inputFieldContainer}>
              {/* Project Name Input Container */}
              <div className={createCredStyle.projectName}>
                <div className={createCredStyle.label}>
                  <p className={createCredStyle.labelTxt}>Project Name</p>
                  <p className={createCredStyle.required}>*</p>
                </div>
                {/* Content */}
                <div className={createCredStyle.credInputField}>
                  <input
                    type="text"
                    name=""
                    id=""
                    placeholder="Enter Email"
                    className={createCredStyle.placeholderTxt}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default page;