'use client'
import { useInquiryFilterStore } from '@/store/inquiryFilterStore'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

export default function ListForm() {
  const router = useRouter()
  const [searchKeyword, setSearchKeyword] = useState('')
  const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore()

  const handleSearch = () => {
    if (searchKeyword.length >= 2) {
      setInquiryListRequest({ ...inquiryListRequest, schTitle: searchKeyword })
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSearch()
    }
  }

  return (
    <>
      <div className="sale-frame">
        <div className="sale-form-bx">
          <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/regist')}>
            お問い合わせ<i className="btn-arr"></i>
          </button>
        </div>
        <div className="sale-form-bx">
          <div className="search-input">
            <input
              type="text"
              className="search-frame"
              placeholder="タイトルを入力してください. (2文字以上)"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              onKeyDown={handleKeyDown}
            />
            <button className="search-icon" onClick={handleSearch}></button>
          </div>
        </div>
      </div>
    </>
  )
}