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

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

export function SwapInfoPanel({ gasFee, serviceFee, serviceFeeToken }: Props) {
  const rows = [
    { label: 'ПРОВАЙДЕР', value: 'ЛУЧШИЙ', link: false },
    { label: 'СКОЛЬЖЕНИЕ', value: 'АВТО (0.5%)', link: true },
    { label: 'СЕТЕВОЙ СБОР', value: gasFee ? `$${gasFee}` : '—', link: false },
    { label: 'СЕРВИСНЫЙ СБОР', value: serviceFee ? `$${serviceFee}` : '—', link: false },
    {
      label: serviceFeeToken ? `СЕРВИСНЫЙ СБОР (${serviceFeeToken.symbol})` : 'СЕРВИСНЫЙ СБОР В ТОКЕНАХ',
      value: serviceFeeToken ? truncateDecimals(serviceFeeToken.amount, 8) : '—',
      link: false,
    },
  ]

  return (
    <div className={styles.panel}>
      {rows.map(({ label, value, link }) => (
        <div key={label} className={styles.row}>
          <span className={styles.label}>{label}</span>
          <span className={`${styles.value} ${link ? styles.link : ''}`}>{value}</span>
        </div>
      ))}
    </div>
  )
}
