import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import { Badge } from '@/components/ui/badge';
import { Utensils, Car, ShoppingBag, Clapperboard, HeartPulse, Home } from 'lucide-react';
import { motion } from 'framer-motion';

const BudgetCategoryGrid: React.FC = () => {

    const categories = [
        { name: 'Food & Dining', spent: 1250, limit: 3000, icon: Utensils, color: 'bg-green-500', iconBg: 'bg-green-100 text-green-600' },
        { name: 'Transportation', spent: 950, limit: 1000, icon: Car, color: 'bg-orange-500', iconBg: 'bg-orange-100 text-orange-600' },
        { name: 'Shopping', spent: 2200, limit: 2000, icon: ShoppingBag, color: 'bg-red-500', iconBg: 'bg-red-100 text-red-600' },
        { name: 'Entertainment', spent: 800, limit: 1500, icon: Clapperboard, color: 'bg-purple-500', iconBg: 'bg-purple-100 text-purple-600' },
        { name: 'Healthcare', spent: 300, limit: 1000, icon: HeartPulse, color: 'bg-blue-500', iconBg: 'bg-blue-100 text-blue-600' },
        { name: 'Housing', spent: 6500, limit: 7000, icon: Home, color: 'bg-indigo-500', iconBg: 'bg-indigo-100 text-indigo-600' },
    ];

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {categories.map((cat, index) => {
                const percentage = Math.min((cat.spent / cat.limit) * 100, 100);
                const remaining = cat.limit - cat.spent;
                const isOverGroups = cat.spent > cat.limit;

                return (
                    <GlassCard key={index} className="p-6 relative overflow-hidden group" hoverEffect>
                        <div className="flex justify-between items-start mb-4">
                            <div className={`p-3 rounded-xl ${cat.iconBg}`}>
                                <cat.icon className="w-6 h-6" />
                            </div>
                            <Badge variant="outline" className={isOverGroups ? "bg-red-50 text-red-600 border-red-200" : "bg-green-50 text-green-600 border-green-200"}>
                                {isOverGroups ? "Over Budget" : "Active"}
                            </Badge>
                        </div>

                        <h3 className="text-lg font-bold text-slate-800 mb-1">{cat.name}</h3>
                        <div className={`text-sm font-medium mb-4 ${remaining < 0 ? 'text-red-500' : 'text-slate-500'}`}>
                            {remaining < 0 ? (
                                <span className="flex items-center gap-1">Over by <DirhamIcon className="w-3 h-3" /> {formatAmount(Math.abs(remaining))}</span>
                            ) : (
                                <span className="flex items-center gap-1"><DirhamIcon className="w-3 h-3" /> {formatAmount(remaining)} left</span>
                            )}
                        </div>

                        <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden mb-2">
                            <motion.div
                                initial={{ width: 0 }}
                                animate={{ width: `${percentage}%` }}
                                transition={{ duration: 1 }}
                                className={`h-full ${cat.color}`}
                            />
                        </div>

                        <div className="flex justify-between text-xs text-slate-400">
                            <span className="flex items-center gap-0.5"><DirhamIcon className="w-3 h-3" /> {formatAmount(cat.spent)}</span>
                            <span className="flex items-center gap-0.5"><DirhamIcon className="w-3 h-3" /> {formatAmount(cat.limit)}</span>
                        </div>
                    </GlassCard>
                );
            })}
        </div>
    );
};

export default BudgetCategoryGrid;