import React from "react";
import Button from "../../component/Button.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import { useNavigate } from "react-router";

export default function CallInsert() {
  const navigate = useNavigate();
  return (
    <main>
      <div className="content-wrap row">
        <ContentTitle contentTitle={"문의글 작성"} />
        <SubTitle explanation={"작성자 정보"} />
        <table className="margin-bottom2 senior-insert">
          <tr>
            <th>작성자</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
          </tr>

          <tr>
            <th>소속 기관</th>
            <td colSpan={3}>
              <input type="text" placeholder="자동입력부분" />
            </td>
          </tr>
          <tr>
            <th>연락처</th>
            <td colSpan={3}>
              <input type="text" placeholder="자동입력부분" />
            </td>
          </tr>
          <tr>
            <th>구분</th>
            <td colSpan={3} className="flex">
              <select name="year" id="year">
                {/* <option value="">반납</option> */}
                <option value="">교환</option>
                <option value="">수리</option>
                {/* <option value="">추가</option> */}
                <option value="">기타</option>
              </select>
            </td>
          </tr>
          <tr>
              <th>내용</th>
              <td colSpan={3}>
                <textarea className="medicine" cols="30" rows="2"></textarea>
              </td>
            </tr>
        </table>
        <SubTitle explanation={"대상자 정보"} />
        <table className="margin-bottom2 senior-insert">
          <tr>
            <th>대상자 선택</th>
            <td colSpan={3} className="flex width">
              <select>
                <option value="">대상자1</option>
                <option value="">대상자2</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>대상자 이름</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
            <th>대상자 등록번호</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
          </tr>
          <tr>
            <th>대상자 연락처</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
            <th>대상자 주소</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
          </tr>
          <tr>
            <th>장비명</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
            <th>장비시리얼넘버</th>
            <td>
              <input type="text" placeholder="자동입력부분" />
            </td>
          </tr>
        </table>
       
        <div className="btn-wrap flex-center">
          <Button
            className={"btn-large gray-btn"}
            btnName={"이전"}
            onClick={() => {
              navigate("/QandASelect");
            }}
          />
          <Button
            className={"btn-large green-btn"}
            btnName={"등록"}
            onClick={() => {
              navigate("/QandASelect");
            }}
          />
        </div>
      </div>
    </main>
  );
}