'use client'

import { useParams } from 'next/navigation'

const inquiryDummyData = {
  writer: {
    name: 'writer',
    email: 'writer@example.com',
  },
  title: 'title',
  content: 'content',
  files: ['file1.jpg', 'file2.jpg', 'file3.jpg'],
  createdAt: '2021-01-01',
  answer: {
    writer: '佐藤一貴',
    content:
      '一次側接続は、自動切替開閉器と住宅分電盤主幹ブレーカの間に蓄電システムブレーカを配線する方法です。\n二次側接続は、住宅分電盤主幹ブレ―カの二次側に蓄電システムブレーカを接続する',
    createdAt: '2021-01-01 12:00:00',
    files: ['file4.jpg', 'file5.jpg', 'file6.jpg'],
  },
}

export default function InquiryDetail() {
  const params = useParams()
  const id = params.id
  return (
    <div>
      <h1>InquiryDetail</h1>
      <p>{id}</p>
      <div className="mt-5">
        <div className="grid grid-cols-2 gap-4">
          <p>writer</p>
          <p>{inquiryDummyData.writer.name}</p>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <p>email</p>
          <p>{inquiryDummyData.writer.email}</p>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <p>title</p>
          <p>{inquiryDummyData.title}</p>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <p>content</p>
          <p>{inquiryDummyData.content}</p>
        </div>
        <div>
          <p>files</p>
          <div className="flex flex-col gap-2">
            {inquiryDummyData.files.map((file) => (
              <span key={file}>{file}</span>
            ))}
          </div>
        </div>
        {inquiryDummyData.answer && (
          <div className="mt-4">
            <h1>Reply: Hanwha Japan</h1>
            <div>
              <p>{inquiryDummyData.answer.writer}</p>
              <p>{inquiryDummyData.answer.createdAt}</p>
              <p>{inquiryDummyData.answer.content}</p>
              <div className="flex flex-col gap-2">
                {inquiryDummyData.answer.files.map((file) => (
                  <span key={file}>{file}</span>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}