"use client";
// TODO: Needs a complete rework to use the DaisyUI component

import React, { useRef, useState } from "react";
import { ModalStatus } from "@/types";
import { FormRefMethods } from "../ModalSignIn/ModalSignInForm";
import Icon from "@/components/icon";

function ModalSignUp() {
  const formRef = useRef<FormRefMethods>(null);
  const handleCloseModal = () => {
    if (formRef.current) {
      formRef.current.resetForm();
    }
  };

  return (
    <>
      <input
        type="checkbox"
        id="sign-up-modal"
        className="modal-toggle"
        name=""
        // onChange={whenModalOpens}
      />
      <label htmlFor="sign-up-modal" className="modal cursor-pointer">
        <label className="modal-box relative  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
          <div className="flex justify-end pb-2 select-none">
            <label
              onClick={handleCloseModal}
              htmlFor="sign-up-modal"
              className="cursor-pointer"
            >
              <Icon name="Dismiss20Filled" size="medium" />
            </label>
          </div>
          <div
            className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
            data-aos="fade-up"
          >
            <h3 className="pb-2 text-lg md:text-3xl pt-6">
              {/* {textOnUse.title} */}
            </h3>
            <p className="text-xs md:text-base">{/* {textOnUse.subTitle} */}</p>
          </div>

          {/* <ModalSignUpForm
              generateCheckoutSession={false}
              companySizeList={companySizeList}
              textOnUse={textOnUse}
              setStatus={setStatus}
              getPriceId={getPriceId}
              ref={formRef}
            /> */}
        </label>
      </label>
    </>
  );
}

export default ModalSignUp;