import { calendarById } from "@/lib/calendars";
import { cn } from "@/lib/utils";

/** The calendar an event belongs to, in that calendar's colour - never the bare id. */
export function CalendarBadge({ calendarId, className }: { calendarId: number; className?: string }) {
  const calendar = calendarById(calendarId);
  return (
    <span
      className={cn(
        "inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium ring-1 ring-inset",
        calendar?.badgeClass ?? "bg-muted text-muted-foreground ring-border",
        className,
      )}
    >
      <span aria-hidden className={cn("size-1.5 rounded-full", calendar?.dotClass ?? "bg-muted-foreground")} />
      {calendar?.label ?? `Kalender ${calendarId}`}
    </span>
  );
}