"use client"; import { Zap } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "sky" | "emerald" | "violet" | "amber" | "rose"; interface Health25Props { metric?: string; value?: string; status?: string; history?: number[]; tone?: Tone; className?: string; } const iconClasses: Record = { neutral: "bg-muted text-foreground", primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", sky: "bg-sky-500 text-white", emerald: "bg-emerald-500 text-white", violet: "bg-violet-500 text-white", amber: "bg-amber-500 text-white", rose: "bg-rose-500 text-white", }; const barClasses: Record = { neutral: "bg-foreground", primary: "bg-primary", foreground: "bg-foreground", sky: "bg-sky-500", emerald: "bg-emerald-500", violet: "bg-violet-500", amber: "bg-amber-500", rose: "bg-rose-500", }; const statusClasses: Record = { neutral: "text-foreground", primary: "text-primary", foreground: "text-foreground", sky: "text-sky-700 dark:text-sky-300", emerald: "text-emerald-700 dark:text-emerald-300", violet: "text-violet-700 dark:text-violet-300", amber: "text-amber-700 dark:text-amber-300", rose: "text-rose-700 dark:text-rose-300", }; export const health25Demo: Health25Props = { metric: "HRV · overnight", value: "68 ms", status: "Recovery looks strong", history: [54, 58, 62, 60, 66, 72, 68], tone: "emerald", }; export function Health25({ metric, value, status, history = [], tone = "emerald", className, }: Health25Props) { const max = Math.max(...history, 1); return (

{metric && ( {metric} )}

{value} {status && ( {status} )}

); }