import React, { useState } from "react";
import styles from "./styles.module.css";
import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
const AddConfigMapModal = (props) => {
  return (
    <div className={styles.container}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <p>Config Maps</p>
          <CloseIcon onClick={() => props.setTriggerAddConfigMap(false)} />
        </div>
        <div className={styles.contentContainer}>
          <div>
            <div className={styles.fieldContainer}>
              <div className={styles.fields}>
                <div className={styles.horizontalInput}>
                  <div>
                    <div>
                      <p>Sub Path</p>
                      <TextField placeHolder="Enter volume name" />
                    </div>
                    <div>
                      <p>Mount Path</p>
                      <TextField placeHolder="Enter path    " />
                    </div>
                  </div>
                </div>

                <div className={styles.radioButtonsContainer}>
                  <div>
                    <p>Type</p>
                    <div>
                      {" "}
                      <div>
                        <label className={styles.radio}>
                          <input type="radio" name="typeOption" />
                          <span className={styles.custom}></span>
                          Raw
                        </label>
                      </div>
                      <div>
                        <label className={styles.radio}>
                          <input type="radio" name="typeOption" />
                          <span className={styles.custom}></span>
                          Credential
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={styles.verticalInput}>
                  <div>
                    <div>
                      <p>Value</p>
                    </div>

                    <textarea
                      name=""
                      id=""
                      placeholder="Enter a description"
                    ></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.addButtonContainer}>
          <PrimaryButton text="  Add " icon={<AddIcon />} />
        </div>
      </div>
    </div>
  );
};
export default AddConfigMapModal;