import type { LucideIcon } from "lucide-react";
interface DashboardKpiCardProps {
label: string;
value: string;
supportingText: string;
icon: LucideIcon;
tone: "blue" | "green" | "orange" | "red" | "violet" | "slate";
trend?: number[];
}
const tones = {
blue: "bg-gradient-to-br from-blue-50 to-blue-100 text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:from-blue-950/60 dark:to-blue-900/30 dark:text-blue-300 dark:ring-blue-400/20",
green: "bg-gradient-to-br from-green-50 to-green-100 text-green-700 ring-1 ring-inset ring-green-600/10 dark:from-green-950/60 dark:to-green-900/30 dark:text-green-300 dark:ring-green-400/20",
orange: "bg-gradient-to-br from-orange-50 to-orange-100 text-orange-700 ring-1 ring-inset ring-orange-600/10 dark:from-orange-950/60 dark:to-orange-900/30 dark:text-orange-300 dark:ring-orange-400/20",
red: "bg-gradient-to-br from-red-50 to-red-100 text-red-700 ring-1 ring-inset ring-red-600/10 dark:from-red-950/60 dark:to-red-900/30 dark:text-red-300 dark:ring-red-400/20",
violet: "bg-gradient-to-br from-violet-50 to-violet-100 text-violet-700 ring-1 ring-inset ring-violet-600/10 dark:from-violet-950/60 dark:to-violet-900/30 dark:text-violet-300 dark:ring-violet-400/20",
slate: "bg-gradient-to-br from-slate-100 to-slate-200 text-slate-700 ring-1 ring-inset ring-slate-600/10 dark:from-slate-800 dark:to-slate-900 dark:text-slate-300 dark:ring-slate-400/20",
};
function Sparkline({ values, tone }: { values: number[]; tone: DashboardKpiCardProps["tone"] }) {
if (values.length < 2 || values.every((value) => value === 0)) return null;
const min = Math.min(...values);
const max = Math.max(...values);
const range = max - min || 1;
const points = values.map((value, index) => `${(index / (values.length - 1)) * 100},${28 - ((value - min) / range) * 24}`).join(" ");
const color = { blue: "#2563eb", green: "#16a34a", orange: "#ea580c", red: "#dc2626", violet: "#7c3aed", slate: "#64748b" }[tone];
return ;
}
export function DashboardKpiCard({ label, value, supportingText, icon: Icon, tone, trend }: DashboardKpiCardProps) {
return (
{label}
{value}
{supportingText}
);
}