import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

export const SettingPage = () => {
  useSetHeaderTitle('설정');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

  return (
    <>
      <main className="pop">
        <div className="sub-wrap">
          <div className="settings-header">
            <div className="settings-title">알림 수신 설정</div>
            <label className="settings-switch">
              <input type="checkbox" />
              <span className="slider"></span>
            </label>
          </div>

          <div className="settings-divider"></div>

          <div className="settings-section">
            <div className="settings-section-title">공지사항 알림</div>
            <div className="settings-row">
              <div className="settings-row-title">서비스 운영 및 장애</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row">
              <div className="settings-row-title">무이자 혜택 및 이벤트</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row">
              <div className="settings-row-title">서비스 이용 및 정책 변경</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row">
              <div className="settings-row-title">NICE소식 및 기타 정보</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
          </div>

          <div className="settings-section nopadding">
            <div className="settings-section-title">정산 알림</div>
            <div className="settings-row">
              <div className="settings-row-title">정산처리 현황</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row nopadding">
              <div className="settings-row-title">정산한도 알림</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
          </div>

          <div className="settings-divider"></div>

          <div className="settings-section nopadding">
            <div className="settings-row link">
              <div className="settings-row-title bd-style">마케팅 정보 수신 동의</div>
              <label className="settings-switch">
                <input type="checkbox" />
                <span className="slider"></span>
              </label>
            </div>
          </div>

          <div className="settings-row link">
            <div className="settings-row-title bd-style">로그인 방식 설정</div>
            <div className="click">ID/PW</div>
          </div>

          <div className="settings-row link nopadding">
            <div className="settings-row-title bd-style">서비스 언어 설정</div>
            <div className="click">기기 설정 언어</div>
          </div>

          <div className="settings-divider"></div>

          <div className="settings-row danger">
            <div className="settings-row-title bd-style">로그아웃</div>
          </div>
        </div>
      </main>
    </>
  );
};