"use client"; import type { HTMLAttributes } from "react"; import { useId, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; export type AnalyticsMetric = { id: string; label: string; value: string; change: string; detail: string }; type AnalyticsBentoCardProps = HTMLAttributes & { metrics: AnalyticsMetric[]; activeId?: string; defaultActiveId?: string; onActiveIdChange?: (id: string) => void; reducedMotion?: boolean; }; export function AnalyticsBentoCard({ metrics, activeId, defaultActiveId, onActiveIdChange, reducedMotion, className = "", "aria-label": ariaLabel, ...props }: AnalyticsBentoCardProps) { const systemReducedMotion = useReducedMotion(); const reduceMotion = Boolean(reducedMotion || systemReducedMotion); const uid = useId(); const [internalId, setInternalId] = useState(defaultActiveId ?? metrics[0]?.id ?? ""); const selectedId = activeId ?? internalId; const select = (id: string) => { if (activeId === undefined) setInternalId(id); onActiveIdChange?.(id); }; return (

{metrics.map((metric, index) => { const selected = metric.id === selectedId; return ( ); })}

); }