'use client'

import { useState } from 'react'
import Answer from './Answer'

export default function Detail() {
  //todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state
  // 추후에 api 작업 완료후 삭제
  // 답변 완료 클래스 & 하단 답변내용 출력도
  const [inquiry, setInquiry] = useState<Boolean>(true)

  return (
    <>
      <div className="inquiry-frame">
        <div className="inquiry-detail-wrap">
          <div className="inquiry-detail-badge">
            <div className={`badge ${inquiry ? 'orange' : 'blue'} block`}>回答完了</div>
          </div>
          <div className="inquiry-detail-data-table">
            <table className="sale-data-table">
              <colgroup>
                <col style={{ width: '80px' }} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>登録日</th>
                  <td>2025.04.10</td>
                </tr>
                <tr>
                  <th>作者</th>
                  <td>Hong gi</td>
                </tr>
                <tr>
                  <th>名前</th>
                  <td>Kim</td>
                </tr>
                <tr>
                  <th>番号</th>
                  <td>070-1234-5678</td>
                </tr>
                <tr>
                  <th>販売店</th>
                  <td>interplug</td>
                </tr>
                <tr>
                  <th>施工店</th>
                  <td>interplugs</td>
                </tr>
                <tr>
                  <th>E-mail</th>
                  <td>Hong@interplug.co.kr</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="inquiry-detail-data">
            <div className="inquiry-detail-category">
              <span>屋根</span>
              <span>適合性</span>
              <span>屋根材</span>
            </div>
            <div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
            <div className="inquiry-detail-txt">
              入力した内容が表示されます.
              <br />
              インストール可能であることを確認してください.
              <br />
              屋根の写真を添付しました.
            </div>
          </div>
          <div className="file-list-wrap">
            <div className="file-list-tit">ファイル添付</div>
            <ul className="file-list">
              <li className="file-item">
                <button className="file-item-bx">
                  <div className="file-item-name">添付ファイル名.jpg </div>
                </button>
              </li>
              <li className="file-item">
                <button className="file-item-bx">
                  <div className="file-item-name">添付ファイル名.jpg </div>
                </button>
              </li>
            </ul>
          </div>
        </div>

        {inquiry && <Answer />}

        <div className="sale-edit-btn">
          <button className="btn-frame n-blue icon">
            リスト<i className="btn-arr"></i>
          </button>
        </div>
      </div>
    </>
  )
}