"use client";
import React, { useState, useRef, useEffect, ReactNode } from "react";
import { Modal } from "@/components/ui/modal";
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';


interface CtModalProps {
  title: string,
  description?: string,
  children: ReactNode;
  okBtnText?: string;
  onClickOk?: () => void;
  isOpen: boolean;
  closeModal: () => void;
  className?: string;
}

export default function CtModal({ title, description, children, okBtnText, onClickOk, isOpen, closeModal, className }: CtModalProps) {
  return (
    // <div className="rounded-2xl border  border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <Modal
        isOpen={isOpen}
        onClose={closeModal}
        className={className}
        isFullscreen={false}
      >
        <div className="flex flex-col px-2 overflow-y-auto custom-scrollbar">
          <div>
            <h5 className="mb-2 font-semibold text-gray-800 modal-title text-theme-xl dark:text-white/90 lg:text-2xl">
              {title}
            </h5>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {description}
            </p>
          </div>

          <div className="mt-6"></div>
          <div className="space-y-4">
            {children}
          </div>
          <div className="flex items-center gap-3 mt-6 modal-footer sm:justify-end">
            <button
              onClick={closeModal}
              type="button"
              className="flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
            >
              닫기
            </button>

            { okBtnText &&
            <button
              type="button"
              className="btn btn-success btn-update-event flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
              onClick={onClickOk ? onClickOk : undefined}
            >
              {okBtnText}
            </button>
            }
          </div>
        </div>
      </Modal>
    // </div>
  );
};
