'use client'
import { useState } from "react"
import { SurveyDetailRequest } from "@/types/Survey"

interface EtcCheckboxProps {
  formName: keyof SurveyDetailRequest
  label: string
  detailInfoForm: SurveyDetailRequest
  setDetailInfoForm: (form: SurveyDetailRequest) => void
}

export default function EtcCheckbox({ formName, label, detailInfoForm, setDetailInfoForm }: EtcCheckboxProps) {
  const [showEtcInput, setShowEtcInput] = useState(false)
  const etcFieldName = `${formName}_etc` as keyof SurveyDetailRequest

  return (
    <div className="space-y-2">
      <label htmlFor={formName} className="block font-medium">{label}</label>
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id={formName}
            checked={detailInfoForm[formName] === 1}
            onChange={(e) => setDetailInfoForm({ 
              ...detailInfoForm, 
              [formName]: e.target.checked ? 1 : 0 
            })}
          />
          <label htmlFor={formName}>있음</label>
        </div>
        
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id={`${formName}_etc_check`}
            checked={showEtcInput}
            onChange={(e) => {
              setShowEtcInput(e.target.checked)
              if (!e.target.checked) {
                setDetailInfoForm({
                  ...detailInfoForm,
                  [etcFieldName]: ''
                })
              }
            }}
          />
          <label htmlFor={`${formName}_etc_check`}>기타</label>
          
          {showEtcInput && (
            <input
              type="text"
              id={`${formName}_etc`}
              value={(detailInfoForm[etcFieldName] as string | null) ?? ''}
              placeholder="기타 사항을 입력하세요"
              onChange={(e) => setDetailInfoForm({
                ...detailInfoForm,
                [etcFieldName]: e.target.value
              })}
              className="border rounded px-2 py-1 ml-2"
            />
          )}
        </div>
      </div>
    </div>
  )
}