import { truncateDecimals } from '@shared/lib/utils/truncateDecimals'
import styles from './BridgeInfoPanel.module.css'

interface Props {
  serviceFee?: string
  serviceFeeToken?: { symbol: string; amount: string }
}

export function BridgeInfoPanel({ serviceFee, serviceFeeToken }: Props) {
  const rows = [
    { label: 'СЕРВИСНЫЙ СБОР', value: serviceFee ? `$${serviceFee}` : '—' },
    {
      label: serviceFeeToken ? `СЕРВИСНЫЙ СБОР (${serviceFeeToken.symbol})` : 'СЕРВИСНЫЙ СБОР В ТОКЕНАХ',
      value: serviceFeeToken ? truncateDecimals(serviceFeeToken.amount, 8) : '—',
    },
  ]

  return (
    <div className={styles.panel}>
      {rows.map(({ label, value }) => (
        <div key={label} className={styles.row}>
          <span className={styles.label}>{label}</span>
          <span className={styles.value}>{value}</span>
        </div>
      ))}
    </div>
  )
}
