import { MetricCard } from "@/features/dashboard/metric-card";
import { formatEnergyKwh } from "@/lib/format";
import type { OverviewToday } from "./overview-contract";

export function OverviewTodayCards({ data }: { data?: OverviewToday }) {
  const cards = [
    { label: "Sessions Today", value: data?.sessions.data === null || data?.sessions.data === undefined ? null : String(data.sessions.data), error: data?.sessions.error, icon: "sessions" as const },
    { label: "Energy Delivered", value: data?.energy.data ? `${formatEnergyKwh(data.energy.data.total)} kWh` : null, error: data?.energy.error, icon: "energy" as const },
  ];
  return <>{cards.map(card => <div key={card.label} className="min-w-0 space-y-2">
    <MetricCard detail label={card.label} value={card.error || card.value === null ? "Unavailable" : card.value} description={`Since 00:00 WIB${data ? ` · ${data.date}` : ""}`} icon={card.icon} />
    {card.error && <p role="alert" className="px-1 text-xs text-destructive">{card.error}</p>}
  </div>)}</>;
}