Metric explainer

"use client";
import { MetricExplainer } from "@/components/ui/notchset/blocks/metric-explainer";

export default function MetricExplainerDemo() {
  return (
    <div className="max-w-[560px]">
      <MetricExplainer
        means="HRV is the small variation between heartbeats. Higher than your own usual means your body has recovered; compare it only with yourself."
        moves={[{ label: "Alcohol", effect: "−9 ms" }, { label: "Late meal", effect: "−4 ms" }, { label: "Walk days", effect: "+4 ms" }, { label: "Sleep over 7 h", effect: "+3 ms" }]}
        movesNote="Your nights, 90-day difference vs nights without"
        tip={{ text: "Your 4 alcohol nights this month cost 9 ms each. Skip it on the nights before hard sessions.", source: "Log tags · 4 nights · Ring HRV", action: { label: "Ask about this", onClick: () => {} } }}
      />
    </div>
  );
}