const rows = Array.from({ length: 5 }).map((_, index) => ({
  no: index + 1,
  title: `게시글 제목 샘플 ${index + 1}`,
  period: '2026-05-04 ~ 2026-05-31',
  createdAt: '2026-05-04',
  status: index === 0 ? '접수중' : '마감',
}));

export function UserListPage() {
  return (
    <>
      <ul className="tabs fill tab03">
        <li>
          <button type="button" className="tab active">
            tab1
          </button>
        </li>
        <li>
          <button type="button" className="tab">
            tab2
          </button>
        </li>
        <li>
          <button type="button" className="tab">
            tab3
          </button>
        </li>
      </ul>

      <div className="search_area">
        <div className="search_left">
          <p className="total_number">
            총 게시물 <b>111</b>건
          </p>
        </div>
        <div className="search_right">
          <select title="검색조건" className="search_select">
            <option>전체</option>
            <option>제목</option>
            <option>내용</option>
          </select>
          <div className="search_type input_type">
            <input type="text" title="검색어 입력" className="input search_input" />
          </div>
          <button type="button" className="btn btn_search">
            검색
          </button>
          <button type="button" className="btn btn_reset">
            초기화
          </button>
        </div>
      </div>

      <div className="table table_type_cols">
        <table>
          <colgroup>
            <col style={{ width: '80px' }} />
            <col style={{ width: 'auto' }} />
            <col style={{ width: '26%' }} />
            <col style={{ width: '11%' }} />
            <col style={{ width: '12%' }} />
          </colgroup>
          <thead>
            <tr>
              <th>번호</th>
              <th>제목</th>
              <th>기간</th>
              <th>등록일</th>
              <th>상태</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.no}>
                <td>
                  <span className="mobile_show">번호</span>
                  {row.no}
                </td>
                <td className="text_left">
                  <span className="mobile_hide">제목</span>
                  <a href="#">{row.title}</a>
                </td>
                <td>
                  <span className="mobile_show">기간</span>
                  {row.period}
                </td>
                <td>
                  <span className="mobile_show">등록일</span>
                  {row.createdAt}
                </td>
                <td>
                  <span className="mobile_show">상태</span>
                  <strong className={`status line ${row.status === '접수중' ? 'blue' : 'gray'}`}>{row.status}</strong>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <ul className="page">
        <li>
          <a href="#" className="btn_page btn_first" title="첫 페이지로 이동">
            <i />
          </a>
        </li>
        <li>
          <a href="#" className="btn_page btn_prev" title="이전 페이지로 이동">
            <i />
          </a>
        </li>
        <li>
          <a href="#" className="active">
            1
          </a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
        <li>
          <a href="#" className="btn_page btn_next" title="다음 페이지로 이동">
            <i />
          </a>
        </li>
        <li>
          <a href="#" className="btn_page btn_last" title="마지막 페이지로 이동">
            <i />
          </a>
        </li>
      </ul>
    </>
  );
}