import type { JSX } from "react"

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

interface AttendanceStatsClassSelectorProps {
  classes: Array<{ id: string; name: string }>
  currentClassId: string
  startDate: string
  endDate: string
}

export function AttendanceStatsClassSelector({
  classes,
  currentClassId,
  startDate,
  endDate,
}: AttendanceStatsClassSelectorProps): JSX.Element {
  const dateParams = `${startDate ? `&startDate=${startDate}` : ""}${endDate ? `&endDate=${endDate}` : ""}`

  return (
    <ChipNav
      options={classes}
      currentId={currentClassId}
      buildHref={(id) => `/teacher/attendance/stats?classId=${id}${dateParams}`}
    />
  )
}