"use client"
import React, { useState } from "react";
import CtModal from '@/components/CtModal';
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';

interface SaveTemplateNameModalProps {
  isOpen: boolean;
  closeModal: (tName: string) => void;
}

export default function SaveTemplateNameModal({ isOpen, closeModal }: SaveTemplateNameModalProps) {
  const [inputValue, setInputValue] = useState<string>("");

  const handleClickSave = () => {
    if (!inputValue || inputValue.trim() === "") {
      alert("사전설정의 설정명을 입력해주세요.");
      return;
    }
    closeModal(inputValue);
  };

  const handleClose = () => {
    setInputValue("");
    closeModal("");
  };

  return (
    <CtModal
      title="설정명 입력"
      description="사전설정 목록에 저장할 설정명을 입력하세요."
      okBtnText="저장"
      onClickOk={handleClickSave}
      isOpen={isOpen}
      closeModal={handleClose}
      className="max-w-[500px] p-6 lg:p-10"
    >
      <div>
        <Label redPoint>설정명</Label>
        <Input 
          type="text" 
          placeholder="설정명을 입력하세요." 
          value={inputValue} 
          onChange={(e) => setInputValue(e.target.value)} 
        />
      </div>
    </CtModal>
  );
}
