shimmer-finance-ai-companion/src/components/budget/BudgetSummaryCards.tsx

import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import {
    Wallet,
    ShoppingBag,
    TrendingDown,
    PiggyBank
} from 'lucide-react';

const BudgetSummaryCards: React.FC = () => {
    // Hardcoded design values
    const data = {
        income: 17500,
        spent: 9600,
        budget: 15000,
        savingsRate: 24
    };

    const remaining = data.budget - data.spent;

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {/* Total Income */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Total Income</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg shadow-green-200">
                        <Wallet className="w-5 h-5 text-white" />
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <DirhamIcon className="w-6 h-6 text-slate-900" />
                    <p className="text-2xl font-bold text-slate-900">{formatAmount(data.income)}</p>
                </div>
                <p className="text-xs text-slate-400 mt-2">Monthly inflow</p>
            </GlassCard>

            {/* Total Spent */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Total Spent</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center shadow-lg shadow-red-200">
                        <ShoppingBag className="w-5 h-5 text-white" />
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <DirhamIcon className="w-6 h-6 text-slate-900" />
                    <p className="text-2xl font-bold text-slate-900">{formatAmount(data.spent)}</p>
                </div>
                <p className="text-xs text-slate-400 mt-2">
                    {(data.spent / data.income * 100).toFixed(1)}% of income
                </p>
            </GlassCard>

            {/* Budget Remaining */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Budget Remaining</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-200">
                        <TrendingDown className="w-5 h-5 text-white" />
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <DirhamIcon className="w-6 h-6 text-slate-900" />
                    <p className="text-2xl font-bold text-slate-900">{formatAmount(remaining)}</p>
                </div>
                <div className="w-full bg-slate-100 rounded-full h-1.5 mt-3 overflow-hidden">
                    <div className="h-full bg-blue-500" style={{ width: `${(remaining / data.budget) * 100}%` }}></div>
                </div>
            </GlassCard>

            {/* Savings Rate */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Savings Rate</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-200">
                        <PiggyBank className="w-5 h-5 text-white" />
                    </div>
                </div>
                <p className="text-2xl font-bold text-slate-900">{data.savingsRate}%</p>
                <p className="text-xs text-green-600 font-medium mt-2 bg-green-50 inline-block px-2 py-0.5 rounded-full">
                    +2% from last month
                </p>
            </GlassCard>
        </div>
    );
};

export default BudgetSummaryCards;