import {
    Banknote,
    CircleDollarSign,
    FileText,
    Percent,
    TrendingUp,
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { formatCurrency } from '@/lib/utils';

type Summary = {
    total_orders: number;
    total_subtotal: number;
    total_discount: number;
    total_amount: number;
    net_total: number;
};

type TransactionSummaryCardProps = {
    summary: Summary;
};

const summaryItems = [
    {
        key: 'total_orders',
        label: 'Total Pesanan',
        icon: FileText,
        color: 'bg-blue-100',
        iconColor: 'text-blue-600',
        format: (value: number) => value.toLocaleString('id-ID'),
    },
    {
        key: 'total_subtotal',
        label: 'Subtotal',
        icon: Banknote,
        color: 'bg-emerald-100',
        iconColor: 'text-emerald-600',
        format: formatCurrency,
    },
    {
        key: 'total_discount',
        label: 'Diskon',
        icon: Percent,
        color: 'bg-amber-100',
        iconColor: 'text-amber-600',
        format: formatCurrency,
    },
    {
        key: 'total_amount',
        label: 'Total Uang',
        icon: CircleDollarSign,
        color: 'bg-purple-100',
        iconColor: 'text-purple-600',
        format: formatCurrency,
    },
    {
        key: 'net_total',
        label: 'Total Bersih',
        icon: TrendingUp,
        color: 'bg-sky-100',
        iconColor: 'text-sky-600',
        format: formatCurrency,
    },
] as const;

export function TransactionSummaryCard({ summary }: TransactionSummaryCardProps) {
    return (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 lg:grid-cols-5">
            {summaryItems.map((item) => (
                <Card key={item.key}>
                    <CardContent className="flex items-center gap-3 py-3">
                        <div
                            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${item.color}`}
                        >
                            <item.icon className={`h-5 w-5 ${item.iconColor}`} />
                        </div>
                        <div>
                            <p className="text-xs text-muted-foreground">
                                {item.label}
                            </p>
                            <p className="text-lg font-bold">
                                {item.format(summary[item.key] as number)}
                            </p>
                        </div>
                    </CardContent>
                </Card>
            ))}
        </div>
    );
}