import type { JSX } from "react"
import { getTranslations } from "next-intl/server"

import { ChipNav } from "@/shared/components/ui/chip-nav"

interface StatsClassSelectorProps {
  classes: Array<{ id: string; name: string }>
  subjects: Array<{ id: string; name: string }>
  currentClassId: string
  currentSubjectId: string
}

export async function StatsClassSelector({
  classes,
  subjects,
  currentClassId,
  currentSubjectId,
}: StatsClassSelectorProps): Promise<JSX.Element> {
  const t = await getTranslations("grades")
  return (
    <div className="flex flex-wrap gap-2">
      <ChipNav
        options={classes}
        currentId={currentClassId}
        buildHref={(id) =>
          `/teacher/grades/stats?classId=${id}${currentSubjectId !== "all" ? `&subjectId=${currentSubjectId}` : ""}`
        }
      />
      <div className="ml-auto">
        <ChipNav
          options={subjects}
          currentId={currentSubjectId}
          buildHref={(id) =>
            id === "all"
              ? `/teacher/grades/stats?classId=${currentClassId}`
              : `/teacher/grades/stats?classId=${currentClassId}&subjectId=${id}`
          }
          allOption={{ id: "all", label: t("filters.allSubjects") }}
        />
      </div>
    </div>
  )
}