import { useState } from 'react';

// ===== ログイン状態に応じた条件付きレンダリング =====
function AuthSection() {
  // 入力: ログインの有無
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 処理: 条件に応じて異なるUIを選択

  // ローディング中 → スピナー表示
  if (loading) {
    return <div className="spinner">読み込み中...</div>;
  }

  // エラー → エラーメッセージ表示
  if (error) {
    return <p style={{ color: "red" }}>エラー: {error.message}</p>;
  }

  // 出力: 条件に応じて異なるUIをレンダリング
  return (
    <div>
      {/* 三項演算子: ログインの有無に応じて異なるコンポーネント */}
      {isLoggedIn ? (
        <div>
          <p>ようこそ！ 🎉</p>
          <button onClick={() => setIsLoggedIn(false)}>ログアウト</button>
        </div>
      ) : (
        <div>
          <p>ログインが必要です。</p>
          <button onClick={() => setIsLoggedIn(true)}>ログイン</button>
        </div>
      )}

      {/* && 演算子: ログイン時にのみ通知を表示 */}
      {isLoggedIn && <p>新しい通知が3件あります。</p>}
    </div>
  );
}