import { useMessage } from '@/hooks/useMessage'

export default function SizeGuide({ setShowSizeGuidModal }) {
  const { getMessage } = useMessage()
  return (
    <div className={`modal-pop-wrap sm alert`}>
      <div className="modal-head">
        <button className="modal-close" onClick={() => setShowSizeGuidModal(false)}>
          닫기
        </button>
      </div>
      <div className="modal-body">
        <div className="alert-title">{getMessage('modal.placement.initial.setting.size.info')}</div>
        <div className="placement-table light">
          <table>
            <colgroup>
              <col style={{ width: '60px' }} />
              <col />
            </colgroup>
            <tbody>
              <tr>
                <th>{getMessage('modal.placement.initial.setting.size.roof')}</th>
                <td>{getMessage('modal.placement.initial.setting.size.roof.info')}</td>
              </tr>
              <tr>
                <th>{getMessage('modal.placement.initial.setting.size.actual')}</th>
                <td>{getMessage('modal.placement.initial.setting.size.actual.info')}</td>
              </tr>
              <tr>
                <th>{getMessage('modal.placement.initial.setting.size.none.pitch')}</th>
                <td>{getMessage('modal.placement.initial.setting.size.none.pitch.info')}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}