import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import { ShieldCheck, Calendar, CreditCard, Percent } from 'lucide-react';

const CreditSummaryCards: React.FC = () => {
    // Hardcoded target values
    const data = {
        score: 785,
        balance: 23700,
        utilization: 12,
        minPayment: 850
    };

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {/* Credit Score */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Credit Score</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-200">
                        <ShieldCheck className="w-5 h-5 text-white" />
                    </div>
                </div>
                <p className="text-2xl font-bold text-slate-900">{data.score}</p>
                <p className="text-xs text-green-600 font-medium mt-2">Excellent • Top 15%</p>
            </GlassCard>

            {/* Total Balance */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Total Balance</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">
                        <CreditCard 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.balance)}</p>
                </div>
                <div className="flex items-center mt-2">
                    <span className="text-xs text-red-500 font-medium">+ AED 1,200 from last month</span>
                </div>
            </GlassCard>

            {/* Utilization */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Utilization</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">
                        <Percent className="w-5 h-5 text-white" />
                    </div>
                </div>
                <p className="text-2xl font-bold text-slate-900">{data.utilization}%</p>
                <div className="w-full bg-slate-100 rounded-full h-1.5 mt-3 overflow-hidden">
                    <div className="h-full bg-green-500" style={{ width: `${data.utilization}%` }}></div>
                </div>
            </GlassCard>

            {/* Min Payment */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Min Payment Due</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-200">
                        <Calendar 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.minPayment)}</p>
                </div>
                <p className="text-xs text-orange-600 font-medium mt-2">Due in 3 days</p>
            </GlassCard>
        </div>
    );
};

export default CreditSummaryCards;