import React from 'react';
import { ArrowDownCircle, ArrowDownIcon, ArrowUp, ArrowUpCircle } from 'lucide-react';
import { formatPriceWithToman } from '@/lib/utils/priceUtils';

interface TransactionItemProps {
    amount: number;
    description: string;
    type: 'deposit' | 'withdraw';
    isLast?: boolean;
}

const TransactionItem = ({
    amount,
    description,
    type,
    isLast = false,
}: TransactionItemProps) => {
    const isDeposit = type === 'deposit';
    const Icon = isDeposit ? ArrowDownIcon : ArrowUp;
    const amountColor = isDeposit ? 'text-[#2E7D32]' : 'text-[#D32F2F]';
    const bgColor = isDeposit ? 'bg-[#2E7D3210]' : 'bg-[#D32F2F10]';
    const iconColor = isDeposit ? 'text-[#2E7D32]' : 'text-[#D32F2F]';

    return (
        <div
            className={`
        flex items-center justify-between w-full py-3
        ${!isLast ? 'border-b border-gray-200' : ''}
      `}
        >
            <div className="flex items-center">
                <div className={`p-2 rounded-full ${bgColor}`}>
                    <Icon className={`w-5 h-5 rotate-45 ${iconColor}`} />
                </div>
                <span className="text-sm font-normal flex mr-4">{description}</span>
            </div>

            <div className="flex flex-col items-end gap-1">
                <span className={`text-sm font-medium ${amountColor}`}>
                    {isDeposit ? '+' : '-'} {formatPriceWithToman(amount)}
                </span>
                <span className="text-sm text-gray-500">۱۴۰۳/۰۸/۲۴</span>
            </div>
        </div>
    );
};

export default TransactionItem;