import { Navigate } from 'react-router';
import { useAuth } from '../../shared/auth';

export function PendingPage() {
  const { user, loading, logout } = useAuth();

  if (loading) {
    return (
      <div className="auth-loading">
        <div className="auth-loading__spinner" />
      </div>
    );
  }

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  if (user.status !== 'PENDING') {
    return <Navigate to="/" replace />;
  }

  return (
    <div className="auth-page">
      <div className="auth-card">
        <div className="auth-status-icon">&#9203;</div>
        <div className="auth-title">승인 대기 중</div>
        <div className="auth-message">
          <b>{user.email}</b> 계정이 등록되었습니다.
          <br />
          관리자가 승인하면 대시보드에 접근할 수 있습니다.
        </div>
        <button className="auth-link-btn" onClick={logout}>
          로그아웃
        </button>
      </div>
    </div>
  );
}