import { useState } from "react";

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

type CatalogProps = {
  courses: Course[];
};

export function CourseCatalog({ courses }: CatalogProps) {
  const [query, setQuery] = useState("");
  const [isFilterOpen, setIsFilterOpen] = useState(false);

  const visibleCourses = courses.filter((course) =>
    course.title.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <section>
      <button type="button" onClick={() => setIsFilterOpen(true)}>
        Buka filter
      </button>
      <input
        aria-label="Cari course"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      {isFilterOpen ? <p>Filter sedang dibuka.</p> : null}
      <p>{visibleCourses.length} course terlihat.</p>
    </section>
  );
}