import { useState } from "react";

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

async function updateBookmark(id: string, isBookmarked: boolean) {
  return { id, isBookmarked };
}

export function CourseBookmark({ initialCourse }: { initialCourse: Course }) {
  const [course, setCourse] = useState(initialCourse);
  const [message, setMessage] = useState<string | undefined>(undefined);

  async function toggleBookmark() {
    const previousCourse = course;
    const nextCourse = {
      ...course,
      isBookmarked: !course.isBookmarked,
    };

    setCourse(nextCourse);
    setMessage(undefined);

    try {
      await updateBookmark(nextCourse.id, nextCourse.isBookmarked);
    } catch {
      setCourse(previousCourse);
      setMessage("Bookmark belum diperbarui. Coba lagi.");
    }
  }

  return (
    <div>
      <button type="button" onClick={toggleBookmark}>
        {course.isBookmarked ? "Hapus bookmark" : "Simpan bookmark"}
      </button>
      {message ? <p role="alert">{message}</p> : null}
    </div>
  );
}