import {
    CircleDollarSign,
    Clock3,
    CreditCard,
    ReceiptText,
    ShoppingCart,
} from "lucide-react";
import { StatChip } from "@/components/crm/global-card";
import type { Metrics } from "@/types/dashboard";
import { money, number } from "@/lib/dashboard";

export default function DashboardKpis({ metrics }: { metrics: Metrics }) {
    return (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
            <StatChip
                icon={CircleDollarSign}
                label="Total Penjualan"
                value={money(metrics.sales)}
                tone="blue"
                variant="compact"
                description="Periode terpilih"
            />

            <StatChip
                icon={ShoppingCart}
                label="Total Order"
                value={number(metrics.orders)}
                tone="emerald"
                variant="compact"
                description="Periode terpilih"
            />

            <StatChip
                icon={ReceiptText}
                label="Total Invoice"
                value={number(metrics.invoice_count)}
                tone="orange"
                variant="compact"
                description="Periode terpilih"
            />

            <StatChip
                icon={CreditCard}
                label="Total Pembayaran"
                value={money(metrics.payments_month)}
                tone="violet"
                variant="compact"
                description="Periode terpilih"
            />

            <StatChip
                icon={Clock3}
                label="Jatuh Tempo"
                value={money(metrics.overdue)}
                tone="rose"
                variant="compact"
                description="Periode terpilih"
            />
        </div>
    );
}