"use client"; import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Droplets, Footprints, Brain, Apple, type LucideIcon, } from "lucide-react"; interface WellnessGoal { id: string; icon: LucideIcon; title: string; current: number; target: number; unit: string; } interface ButtonItem { id: string; label: string; href?: string; variant?: | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive"; } interface Health2Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; goals?: WellnessGoal[]; buttons?: ButtonItem[]; columns?: 3 | 4 | "3" | "4"; className?: string; } export const health2Demo: Health2Props = { badge: { label: "Daily Goals", variant: "outline" }, heading: "Track your wellness journey", description: "Set daily goals and watch your healthy habits grow. Small steps lead to big changes.", goals: [ { id: "water", icon: Droplets, title: "Water Intake", current: 6, target: 8, unit: "glasses", }, { id: "steps", icon: Footprints, title: "Daily Steps", current: 7500, target: 10000, unit: "steps", }, { id: "mindfulness", icon: Brain, title: "Mindfulness", current: 15, target: 20, unit: "minutes", }, { id: "nutrition", icon: Apple, title: "Healthy Meals", current: 3, target: 3, unit: "meals", }, ], buttons: [ { id: "btn-1", label: "Update goals", href: "https://beste.co" }, { id: "btn-2", label: "View history", href: "https://beste.co", variant: "outline", }, ], }; export function Health2({ badge, heading, description, goals = [], buttons = [], columns = 4, className, }: Health2Props) { const columnCount = Number(columns); if (goals.length === 0) return null; return (

{(badge || heading || description) && (

{badge && (

{badge.label}

)} {heading && (

{heading}

)} {description && (

{description}

)}

{goals.map((goal) => { const Icon = goal.icon; const percentage = Math.min((goal.current / goal.target) * 100, 100); return (

{/* Icon */}

{/* Title */}

{goal.title}

{/* Progress text */}

{goal.current.toLocaleString()} / {goal.target.toLocaleString()} {goal.unit}

{/* Progress bar */}

{/* Percentage */}

{Math.round(percentage)}% completed

); })}

{buttons.length > 0 && (

{buttons.map((button) => ( ))}

)}

); }