const Header = ({req}) =>{

  return (
    <div className="inner-container">

      <div className="search-container">

        {req.searchReq.map(s=>{
          switch(s.type){
            case "text":
              return (
                <div className="input-container flexcol gap06">
                  <div className="input-box">
                    <input type={s.type} id={s.id} placeholder={s.placeholder}></input>
                  </div>
                </div>
              );
            case "checkbox":
              return (
                <div className="input-container flexrow checkbox-container">
                  <label for={s.id}>{s.label}</label>
                  <div className="input-box">
                    <input type={s.type} id={s.id} checked={s.checked}></input>
                  </div>
                </div>
              )
            case "select":
              return (
                <div className="input-container flexcol gap06">
                  <div className="input-box">
                    <select name={s.id} id={s.id}>
                      <option value="">- 전체 -</option>
                      {s.option.map(op=>(
                        <option value={op.value}>{op.text}</option>
                      ))}
                    </select>
                  </div>
                </div>
              )

          }
        })}

        
      </div>

      <div className="button-container">
        <div className="button-box">
          <button className="point-btn" disabled={req.btn["excel_down"]} id="excel_down">엑셀 양식 다운로드</button>
          <input type="file" id="fileInput" hidden accept=".xlsx, .xls"></input>
          <button className="point-btn" disabled={req.btn["excel_data"]} id="excel_data">엑셀 다운로드</button>
          <button className="point-btn" disabled={req.btn["excel_up"]} id="excel_up">엑셀 업로드</button>

          { req.btn.addBtn ? req.btn.addBtn.map((add)=>{
            return(
                <button className="point-btn" disabled={add.disabled} id={add.id}>{add.value}</button>
              )
            }) : null }

          <button className="point-btn" disabled={req.btn["filter_btn"]} id="filter_btn">조회</button>
          <button className="point-btn" disabled={req.btn["put_btn"]} id="put_btn">저장</button>
        </div>
      </div>

    </div>
  );
};