"use client"

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

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
import type { StudentEnrolledClass } from "@/modules/classes/types"

export function StudentScheduleFilters({ classes }: { classes: StudentEnrolledClass[] }) {
  const t = useTranslations("student")
  const [classId, setClassId] = useQueryState("classId", parseAsString.withDefault("all"))

  const options = useMemo(() => [{ id: "all", name: t("scheduleFilters.allClasses") }, ...classes], [classes, t])

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div className="w-full sm:w-60">
        <Select value={classId} onValueChange={setClassId}>
          <SelectTrigger>
            <SelectValue placeholder={t("scheduleFilters.selectClass")} />
          </SelectTrigger>
          <SelectContent>
            {options.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}
