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 AddVolumeModal = (props) => {
  return (
    <div className={styles.container}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <p>Volumes</p>
          <CloseIcon onClick={() => props.setTriggerAddVolume(false)} />
        </div>
        <div className={styles.contentContainer}>
          <div>
            <div className={styles.fieldContainer}>
              <div className={styles.fields}>
                <div className={styles.horizontalInput}>
                  <div>
                    <div>
                      <p>Name</p>
                      <TextField placeHolder="Enter volume name" />
                    </div>
                    <div>
                      <p>Path</p>
                      <TextField placeHolder="Enter path    " />
                    </div>
                  </div>
                </div>
                <div className={styles.horizontalInput}>
                  <div>
                    <div>
                      <p>Existing Claim (Optional)</p>
                      <TextField placeHolder="Create new PVC" />
                    </div>
                    <div>
                      <p>Volume size (MB)</p>
                      <TextField placeHolder="0" />
                    </div>
                  </div>
                </div>
                <div className={styles.verticalInput}>
                  <div>
                    <div>
                      <p>Storage Class name</p>
                    </div>
                    <TextField placeHolder="e.g., efs-sc" />
                  </div>
                </div>
                <div className={styles.verticalInput}>
                  <div>
                    <div>
                      <p>Access Mode</p>
                    </div>
                    <TextField placeHolder="ReadWriteOnce (RWO) - Single node read-write" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.addButtonContainer}>
          <PrimaryButton />
        </div>
      </div>
    </div>
  );
};
export default AddVolumeModal;
