import React from "react";
import globalStyle from "../../globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import WarningIcon from "@/app/components/icons/warning";
const AddProject = () => {
  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            state="add"
            topbarTitle="Create New Project"
            requiredButtons={["title", "save"]}
          />
          <div className={styles.contentContainer}>
            <TopToolTip />
            <div className={styles.createProjectFormContainer}>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Project Name <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <TextField placeHolder="Enter project name" />
                  <div className={styles.prompts}>
                    <WarningIcon />
                    <p>The name is already in used. You can try another.</p>
                  </div>
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Project Version <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <TextField placeHolder="Version" />
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Organization <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <SelectField
                    label="Select"
                    options={[
                      { label: "Option", value: "option" },
                      { label: "Option 1", value: "option 1" },
                      { label: "Option 2", value: "option 2" },
                    ]}
                  />
                </div>
              </div>
              <div className={styles.inputGroup}>
                <div className={styles.label}>
                  <p>
                    Agent <span>*</span>
                  </p>
                </div>
                <div className={styles.inputField}>
                  <SelectField
                    label="Select"
                    options={[
                      { label: "Option", value: "option" },
                      { label: "Option 1", value: "option 1" },
                      { label: "Option 2", value: "option 2" },
                    ]}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddProject;
