import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import { ArrowUpRight, ArrowDownLeft } from 'lucide-react';

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

    const transactions = [
        { date: 'Today, 2:30 PM', name: 'Carrefour', category: 'Food & Dining', amount: -450, type: 'expense' },
        { date: 'Yesterday, 8:15 PM', name: 'Uber', category: 'Transportation', amount: -65, type: 'expense' },
        { date: 'Feb 12, 10:00 AM', name: 'Freelance Project', category: 'Income', amount: 3500, type: 'income' },
        { date: 'Feb 10, 6:45 PM', name: 'Zara', category: 'Shopping', amount: -320, type: 'expense' },
        { date: 'Feb 08, 1:20 PM', name: 'DEWA Bill', category: 'Utilities', amount: -650, type: 'expense' },
    ];

    return (
        <GlassCard className="p-6 h-full flex flex-col">
            <h3 className="text-lg font-semibold text-slate-800 mb-6">Recent Transactions</h3>
            <div className="space-y-4 flex-1">
                {transactions.map((tx, index) => (
                    <div key={index} className="flex items-center justify-between p-3 rounded-xl hover:bg-slate-50/80 transition-colors border border-transparent hover:border-slate-100">
                        <div className="flex items-center gap-4">
                            <div className={`w-10 h-10 rounded-full flex items-center justify-center ${tx.type === 'income' ? 'bg-green-100 text-green-600' : 'bg-slate-100 text-slate-600'}`}>
                                {tx.type === 'income' ? <ArrowDownLeft className="w-5 h-5" /> : <ArrowUpRight className="w-5 h-5" />}
                            </div>
                            <div>
                                <p className="text-sm font-bold text-slate-900">{tx.name}</p>
                                <p className="text-xs text-slate-500">{tx.date} • {tx.category}</p>
                            </div>
                        </div>
                        <div className={`text-right font-bold text-sm ${tx.type === 'income' ? 'text-green-600' : 'text-slate-900'}`}>
                            <span className="flex items-center gap-0.5">
                                {tx.type === 'income' ? '+' : '-'} <DirhamIcon className="w-3 h-3" /> {formatAmount(Math.abs(tx.amount))}
                            </span>
                        </div>
                    </div>
                ))}
            </div>
        </GlassCard>
    );
};

export default RecentTransactionsCard;