interface AsyncState<T> {
  data: T | null;
  isLoading: boolean;
  error: string | null;
}

function CourseList() {
  const [state, setState] = useState<AsyncState<Course[]>>({
    data: null,
    isLoading: true,
    error: null,
  });

  useEffect(() => {
    fetch('/api/courses')
      .then(res => res.json())
      .then(data => setState({ data, isLoading: false, error: null }))
      .catch(err => setState({ data: null, isLoading: false, error: err.message }));
  }, []);

  // Pattern: early returns לשגיאות ולטעינה
  if (state.isLoading) {
    return (
      <div className="loading-container">
        <Spinner size="lg" />
        <p>טוען קורסים...</p>
      </div>
    );
  }

  if (state.error) {
    return (
      <div className="error-container">
        <p>שגיאה: {state.error}</p>
        <button onClick={() => window.location.reload()}>נסה שוב</button>
      </div>
    );
  }

  if (!state.data || state.data.length === 0) {
    return (
      <div className="empty-state">
        <h3>אין קורסים עדיין</h3>
        <p>בקרו שוב בקרוב</p>
      </div>
    );
  }

  // happy path - הdata מובטח כאן
  return (
    <div className="courses-grid">
      {state.data.map(course => (
        <CourseCard key={course.id} course={course} />
      ))}
    </div>
  );
}
Conditional Rendering — if, ternary, && ב-JSX

Conditional Rendering — if, ternary, && ב-JSX
