shimmer-finance-ai-companion/src/components/savings/SavingsGoalsGrid.tsx

import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Clock, Plus } from 'lucide-react';
import { motion } from 'framer-motion';

import { toast } from 'sonner';

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

    const goals = [
        { name: 'Emergency Fund', saved: 25000, target: 50000, daysLeft: 120, color: 'bg-yellow-500' },
        { name: 'Vacation', saved: 5000, target: 15000, daysLeft: 65, color: 'bg-blue-500' },
        { name: 'New Car', saved: 85000, target: 120000, daysLeft: 411, color: 'bg-green-500' },
        { name: 'Wedding', saved: 10000, target: 80000, daysLeft: 500, color: 'bg-pink-500' },
        { name: 'Home Downpayment', saved: 125000, target: 200000, daysLeft: 730, color: 'bg-indigo-500' },
    ];

    const handleAddSavings = (amount: number | 'custom', goalName: string) => {
        if (amount === 'custom') {
            toast.info("Custom amount feature pending: Enter amount manually soon.");
        } else {
            toast.success(`Ajded AED ${amount} to ${goalName}`);
        }
    };

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {goals.map((goal, index) => {
                const percentage = Math.round((goal.saved / goal.target) * 100);

                return (
                    <GlassCard key={index} className="p-6 flex flex-col justify-between h-full" hoverEffect>
                        <div>
                            <div className="flex justify-between items-start mb-4">
                                <div>
                                    <h3 className="text-lg font-bold text-slate-800">{goal.name}</h3>
                                    <div className="flex items-center gap-1 text-slate-500 text-xs mt-1">
                                        <Clock className="w-3 h-3" />
                                        <span>{goal.daysLeft} days remaining</span>
                                    </div>
                                </div>
                                <div className="px-3 py-1 rounded-full bg-slate-100 text-slate-600 text-xs font-bold border border-slate-200">
                                    {percentage}%
                                </div>
                            </div>

                            <div className="space-y-2 mb-6">
                                <Progress value={percentage} className="h-2.5" indicatorClassName={goal.color} />
                                <div className="flex justify-between text-xs text-slate-500">
                                    <span className="font-semibold text-slate-900 flex items-center gap-0.5"><DirhamIcon className="w-3 h-3" /> {formatAmount(goal.saved)}</span>
                                    <span className="flex items-center gap-0.5"><DirhamIcon className="w-3 h-3" /> {formatAmount(goal.target)}</span>
                                </div>
                            </div>
                        </div>

                        <div className="grid grid-cols-3 gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                className="h-8 text-xs border-slate-200 hover:bg-slate-50 hover:text-slate-900"
                                onClick={() => handleAddSavings(1000, goal.name)}
                            >
                                +1K
                            </Button>
                            <Button
                                variant="outline"
                                size="sm"
                                className="h-8 text-xs border-slate-200 hover:bg-slate-50 hover:text-slate-900"
                                onClick={() => handleAddSavings(5000, goal.name)}
                            >
                                +5K
                            </Button>
                            <Button
                                size="sm"
                                className="h-8 text-xs bg-black text-white hover:bg-slate-800"
                                onClick={() => handleAddSavings('custom', goal.name)}
                            >
                                Custom
                            </Button>
                        </div>
                    </GlassCard>
                );
            })}
        </div>
    );
};

export default SavingsGoalsGrid;