import { cn } from "@/lib/utils"

// Bereichs-Schalter der Leistungs-Karten: Live (2-min-Browser-Store) vs. 1h/24h
// (Backend-Ringpuffer, /api/system/history). Bewusst winzig — kein Chart-Gebirge.
export type ChartRange = "live" | "1h" | "24h"
export const RANGE_MINUTES: Record<Exclude<ChartRange, "live">, number> = { "1h": 60, "24h": 1440 }

const LABELS: Record<ChartRange, string> = { live: "Live", "1h": "1 h", "24h": "24 h" }

export function RangeSwitch({ value, onChange }: { value: ChartRange; onChange: (r: ChartRange) => void }) {
  return (
    <div className="flex rounded-lg border border-border/40 bg-background/30 p-0.5">
      {(Object.keys(LABELS) as ChartRange[]).map((r) => (
        <button
          key={r}
          onClick={() => onChange(r)}
          className={cn(
            "rounded-md px-2 py-0.5 text-[9px] font-bold uppercase tracking-wide transition-all cursor-pointer",
            value === r ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground",
          )}
        >
          {LABELS[r]}
        </button>
      ))}
    </div>
  )
}
