import type { ReactNode } from "react"
import { cn } from "cn"

export type ChipArt = "gruen" | "bernstein" | "cyan" | "rot" | "grau"

const ART: Record<ChipArt, string> = {
  gruen: "border-gruen-rand bg-gruen-grund text-gruen",
  bernstein: "border-bernstein/60 bg-bernstein-grund text-bernstein",
  cyan: "border-cyan-rand bg-cyan-grund text-cyan",
  rot: "border-rot-rand bg-rot-grund text-rot-text",
  grau: "border-linie bg-erhaben text-text-2",
}

/** Kleines Zustandsschild („GELADEN“, „PASST“, „FEHLGESCHLAGEN“). */
export function Chip({ art = "grau", children }: { art?: ChipArt; children: ReactNode }) {
  return (
    <span className={cn("schild inline-flex h-7 items-center rounded-full border px-2.5 text-xs whitespace-nowrap", ART[art])}>
      {children}
    </span>
  )
}

/** Einheitlicher Platzhalter, solange Daten laden oder wenn die Box nicht antwortet. */
export function Zustandsfeld({ fehler, text }: { fehler?: boolean; text: string }) {
  return (
    <div
      role={fehler ? "alert" : "status"}
      className={cn(
        "rounded-2xl border px-5 py-8 text-center text-[15px]",
        fehler ? "border-rot-rand bg-rot-grund text-rot-text" : "border-linie bg-panel text-text-2",
      )}
    >
      {text}
    </div>
  )
}