import React from 'react';
import { ArrowDownIcon, ArrowUp } 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-success' : 'text-error';
  const bgColor = isDeposit ? 'bg-success/10' : 'bg-error/10';
  const iconColor = isDeposit ? 'text-success' : 'text-error';

  return (
    <div
      className={`
        flex items-center justify-between w-full py-3
        ${!isLast ? 'border-b border-border' : ''}
      `}
    >
      <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;