type Course = {
  id: string;
  title: string;
};

type CourseListState =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "empty" }
  | { status: "ready"; courses: Course[] };

export function CourseList({ state }: { state: CourseListState }) {
  if (state.status === "loading") {
    return <p aria-busy="true">Memuat course...</p>;
  }

  if (state.status === "error") {
    return (
      <section role="alert">
        <p>{state.message}</p>
        <button type="button">Coba lagi</button>
      </section>
    );
  }

  if (state.status === "empty") {
    return <p>Belum ada course yang cocok. Coba ubah filter.</p>;
  }

  return (
    <ul>
      {state.courses.map((course) => (
        <li key={course.id}>{course.title}</li>
      ))}
    </ul>
  );
}