"use client"

import { useQueryState, parseAsString } from "nuqs"
import { useTranslations } from "next-intl"

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

export function CourseFilters() {
  const t = useTranslations("student")
  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={t("courseFilters.searchPlaceholder")}
      />
    </FilterBar>
  )
}
