"use client"; import { Droplet } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "sky" | "emerald" | "violet" | "amber" | "rose"; interface Health6Props { filled?: number; total?: number; mlPerCup?: number; label?: string; 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 cupFillClasses: Record = { neutral: "border-foreground bg-foreground", primary: "border-primary bg-primary", foreground: "border-foreground bg-foreground", sky: "border-sky-500 bg-sky-500", emerald: "border-emerald-500 bg-emerald-500", violet: "border-violet-500 bg-violet-500", amber: "border-amber-500 bg-amber-500", rose: "border-rose-500 bg-rose-500", }; export const health6Demo: Health6Props = { filled: 5, total: 8, mlPerCup: 250, label: "Water", tone: "sky", }; export function Health6({ filled = 0, total = 8, mlPerCup = 250, label = "Water", tone = "sky", className, }: Health6Props) { const clamped = Math.max(0, Math.min(total, filled)); const totalMl = clamped * mlPerCup; const goalMl = total * mlPerCup; return (

{label} {totalMl} / {goalMl} ml

{clamped} / {total}

); }