'use client'

import { Inquiry } from '@/types/Inquiry'

export default function Answer({
  inquiryDetail,
  downloadFile,
}: {
  inquiryDetail: Inquiry
  downloadFile: (encodeFileNo: number, srcFileNm: string) => Promise<Blob | null>
}) {
  return (
    <>
      <div className="inquiry-answer-wrap">
        <div className="inquiry-answer-header">
          <div className="inquiry-answer-tit">Hanwha Japan 回答</div>
          <div className="inquiry-answer-date">
            <span>{inquiryDetail?.ansRegNm}</span>/ <span>{inquiryDetail?.ansRegDt}</span>
          </div>
        </div>
        <div className="inquiry-detail-data">
          <div className="inquiry-answer-tit">回答</div>
          <div className="inquiry-detail-txt">{inquiryDetail?.ansContents}</div>
        </div>
        <div className="file-list-wrap">
          <div className="file-list-tit">ファイル添付</div>
          <ul className="file-list">
            {inquiryDetail?.ansListFile?.map((file) => (
              <li className="file-item" key={file.fileNo}>
                <button className="file-item-bx" onClick={() => downloadFile(Number(file.encodeFileNo), file.srcFileNm)}>
                  <div className="file-item-name">{file.srcFileNm} </div>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  )
}