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 PasswordModifyLoginPasswordPage = () => {
  const { navigate } = useNavigate();

  useSetHeaderTitle('로그인 비밀번호 변경');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.account.password.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">가맹점 <span className="red">*</span></div>
                  <select className="wid-100">
                    <option>nictest01g</option>
                  </select>
                </div>
                <div className="ua-row">
                  <div className="ua-label">기존 비밀번호 <span className="red">*</span></div>
                  <input 
                    className="wid-100"
                    type="password"
                    placeholder=""
                  />
                </div>
                <div className="ua-row">
                  <div className="ua-label">변경 비밀번호 <span className="red">*</span></div>
                  <input 
                    className="wid-100 error"
                    type="password"
                    placeholder=""
                  />
                </div>
                <div className="ua-help error">입력 정보 불일치</div>
                <div className="ua-row">
                  <div className="ua-label">변경 비밀번호 재입력 <span className="red">*</span></div>
                  <input 
                    className="wid-100 error"
                    type="password"
                    placeholder=""
                  />
                </div>
              </div>

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