
import React from 'react';
import { Transaction } from '@/contexts/budget/types';
import TransactionIcon from '../transaction/TransactionIcon';
import { formatCurrency } from '@/utils/currencyFormatter';

interface RecentTransactionItemProps {
  transaction: Transaction;
  onClick: () => void;
}

const RecentTransactionItem: React.FC<RecentTransactionItemProps> = ({ 
  transaction, 
  onClick 
}) => {
  return (
    <div
      onClick={onClick}
      className="flex justify-between py-2 cursor-pointer px-[5px] bg-transparent"
    >
      <div className="flex items-center">
        <TransactionIcon category={transaction.category} />
        <div className="ml-3">
          <h3 className="font-medium text-black text-left text-sm">
            {transaction.title}
          </h3>
          <p className="text-xs text-gray-500">{transaction.date}</p>
        </div>
      </div>
      <div className="text-right">
        <p className="font-semibold text-neuro-income text-sm">
          -{formatCurrency(transaction.amount)}
        </p>
        <p className="text-xs text-gray-500">{transaction.category}</p>
      </div>
    </div>
  );
};

export default RecentTransactionItem;
