'use client'
import { useState } from "react"

export default function SaleZipCodePop() {
  const [searchValue, setSearchValue] = useState(''); //search 데이터 유무

  //search 데이터 value 추가
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { 
    setSearchValue(e.target.value);
  };

  return(
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img">
                  <img src="/assets/images/layout/modal_header_icon02.svg" alt="" />
                </div>
                <div className="modal-name">住所検索</div>
              </div>
              <button className="modal-close"></button>
            </div>
          </div>
          <div className="modal-body">
            <div className="zip-code-search-wrap">
              <div className="zip-code-search-input">
                <div className="search-input">
                  <input type="text" className="search-frame" value={searchValue} onChange={handleChange} placeholder="Search"/>
                  {/*input에 데이터 있으면 삭제버튼 보임 */}
                  {searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
                  <button className="search-icon"></button>
                </div>
              </div>
              <div className="zip-code-table-wrap">
                <div className="zip-code-table-tit">名前</div>
                <table className="zip-code-table">
                  <thead>
                    <tr>
                      <th>都道府県</th>
                      <th>市区町村</th>
                      <th>市区町村以下</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>東京都</td>
                      <td>浜松</td>
                      <td>浜松町</td>
                    </tr>
                    <tr>
                      <td>東京都</td>
                      <td>浜松</td>
                      <td>浜松町</td>
                    </tr>
                    <tr>
                      <td>東京都</td>
                      <td>浜松</td>
                      <td>浜松町</td>
                    </tr>
                  </tbody>
                </table>
                <div className="btn-flex-wrap">
                  <div className="btn-bx">
                    <button className="btn-frame red icon">住所の適用<i className="btn-arr"></i></button>
                  </div>
                  <div className="btn-bx">
                    <button className="btn-frame n-blue icon">閉じる<i className="btn-arr"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}