import { Mode, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'

export default function ButtonForm(props: { mode: Mode; setMode: (mode: Mode) => void; data: { basic: SurveyBasicRequest; roof: SurveyDetailRequest } }) {
  const { mode, setMode } = props
  return (
    <>
      {mode === 'CREATE' && (
        <div className="sale-form-btn-wrap">
          <div className="btn-flex-wrap">
            <div className="btn-bx">
              {/* 임시저장 */}
              <button className="btn-frame n-blue icon" onClick={() => setMode('TEMP')}>
                一時保存<i className="btn-arr"></i>
              </button>
            </div>
            <div className="btn-bx">
              {/* 저장 */}
              <button className="btn-frame red icon">
                保存<i className="btn-arr"></i>
              </button>
            </div>
            <div className="btn-bx">
              {/* 목록 */}
              <button className="btn-frame n-blue icon">
                リスト<i className="btn-arr"></i>
              </button>
            </div>
          </div>
        </div>
      )}
      {mode === 'TEMP' && (
        <div className="sale-form-btn-wrap">
          <div className="btn-flex-wrap">
            <div className="btn-bx">
              {/* 수정 */}
              <button className="btn-frame n-blue icon" onClick={() => setMode('EDIT')}>
                修正<i className="btn-arr"></i>
              </button>
            </div>
            <div className="btn-bx">
              {/* 삭제 */}
              <button className="btn-frame n-blue icon">
                削除<i className="btn-arr"></i>
              </button>
            </div>
          </div>
        </div>
      )}
      {mode === 'EDIT' && (
        <div className="sale-form-btn-wrap">
          <div className="btn-flex-wrap">
            <div className="btn-bx">
              {/* 목록 */}
              <button className="btn-frame n-blue icon">
                リスト<i className="btn-arr"></i>
              </button>
            </div>
            <div className="btn-bx">
              {/* 제출 */}
              <button className="btn-frame red icon">
                提出<i className="btn-arr"></i>
              </button>
            </div>
            <div className="btn-bx">
              {/* 수정 */}
              <button className="btn-frame n-blue icon" onClick={() => setMode('EDIT')}>
                修正<i className="btn-arr"></i>
              </button>
            </div>
            <div className="btn-bx">
              {/* 삭제 */}
              <button className="btn-frame n-blue icon">
                削除<i className="btn-arr"></i>
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}