import type { ControlCardStatus } from "@/lib/daily-control-cards";

type Item = { label: string; value: string; detail: string; status?: ControlCardStatus; trend?: "up" | "down" };

export function ControlStrip({ items }: { items: Item[] }) {
  return <section className="controlStrip" aria-label="Indicateurs de contrôle">{items.map((item) => <article className={`control ${item.status ?? "ok"}`} key={item.label}><p>{item.label}</p><strong>{item.value}</strong><span>{item.detail}</span></article>)}</section>;
}

export function KpiGrid({ items }: { items: Item[] }) {
  return <section className="kpiGrid" aria-label="Indicateurs clés">{items.map((item) => <article className="kpi" key={item.label}><p>{item.label}</p><strong>{item.value}</strong><span className={item.trend}>{item.detail}</span></article>)}</section>;
}