"use client"

import { useQueryState, parseAsString } from "nuqs"

import { FilterBar, FilterSearchInput } from "@/shared/components/ui/filter-bar"

export function CourseFilters() {
  const [search, setSearch] = useQueryState("q", parseAsString.withDefault(""))

  const hasFilters = Boolean(search)

  return (
    <FilterBar
      layout="between"
      hasFilters={hasFilters}
      onReset={() => setSearch(null)}
    >
      <FilterSearchInput
        value={search}
        onChange={(v) => setSearch(v || null)}
        placeholder="Search by class name, teacher, school..."
      />
    </FilterBar>
  )
}
