import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const UserAddAccountPage = () => {
  const { navigate } = useNavigate();

  useSetHeaderTitle('사용자 추가');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.account.user.manage);
  });

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="ing-list add">
              <div className="user-add">
                <div className="ua-row">
                  <div className="ua-label">사용자ID <span className="red">*</span></div>
                  <input 
                    className="wid-100 error"
                    type="text"
                    placeholder="ID를 입력해 주세요"
                  />
                </div>
                <div className="ua-help error">동일한 ID가 이미 존재합니다.</div>

                <div className="ua-row">
                  <div className="ua-label">비밀번호 <span className="red">*</span></div>
                  <input 
                    className="wid-100 error"
                    type="password"
                    placeholder="8자리 이상 입력해 주세요"
                  />
                </div>
                <div className="ua-help error">(오류 결과 메시지)</div>

                <div className="ua-row">
                  <div className="ua-label">로그인 범위</div>
                  <select className="wid-100">
                    <option>MID + GID</option>
                  </select>
                </div>
              </div>
              <div className="info-divider"></div>
              <div className="user-add info">
                <div className="ua-desc">
                  <div className="ua-title">본인인증용 정보 입력</div>
                  <p className="ua-note">입력하신 정보는 이후 로그인 및 가맹점 관련 자료 발송에 이용됩니다.</p>
                </div>

                <div className="ua-group">
                  <div className="ua-group-header">
                    <div className="ua-group-title">이메일 주소</div>
                    <button 
                      className="ic20 plus" 
                      type="button" 
                      aria-label="이메일 추가"
                    ></button>
                  </div>
                  <div className="ua-input-row">
                    <input 
                      className="wid-100" 
                      type="text" 
                      placeholder="example@domain.com" 
                    />
                    <button 
                      className="icon-btn minus" 
                      type="button" 
                      aria-label="삭제"
                    ></button>
                  </div>
                </div>

                <div className="ua-group">
                  <div className="ua-group-header">
                    <div className="ua-group-title">휴대폰 번호</div>
                    <button 
                      className="ic20 plus" 
                      type="button" 
                      aria-label="휴대폰 추가"
                    ></button>
                  </div>
                  <div className="ua-input-row">
                    <input 
                      className="wid-100"
                      type="text"
                      placeholder="01012345678"
                    />
                    <button 
                      className="icon-btn minus" 
                      type="button" 
                      aria-label="삭제"
                    ></button>
                  </div>
                </div>
              </div>

              <div className="apply-row">
                <button 
                  className="btn-50 btn-blue flex-1"
                  type="button" 
                >저장</button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};