import { TIERS } from '@widgets/currency-converter'
import styles from './CommissionPanel.module.css'

const ru = (n: number) => n.toLocaleString('ru-RU')

interface Props {
  amount: number
  progress: number
  commission: number
  effectiveRate: number
}

export function CommissionPanel({ amount, progress, commission, effectiveRate }: Props) {
  return (
    <div>
      <div className={styles.title}>КОМИССИЯ СЕРВИСА</div>

      <div className={styles.table}>
        {TIERS.map((tier, i) => (
          <div
            key={i}
            className={styles.row}
            data-active={(amount >= tier.min && amount <= tier.max) || undefined}
          >
            <span className={styles.range}>
              {ru(tier.min)} – {ru(tier.max)} ₽
            </span>
            <span className={styles.pct}>{tier.pct}%</span>
          </div>
        ))}
      </div>

      <div className={styles.progressBar}>
        <div className={styles.progressFill} style={{ width: `${progress}%` }} />
      </div>

      <div className={styles.summary}>
        <span className={styles.summaryLabel}>Комиссия</span>
        <span className={styles.summaryValue}>
          {commission.toLocaleString('ru-RU', { maximumFractionDigits: 2 })} ₽
        </span>
      </div>
      <div className={styles.summary}>
        <span className={styles.summaryLabel}>Курс с комиссией</span>
        <span className={styles.summaryValue}>{effectiveRate.toFixed(2)} ₽</span>
      </div>
    </div>
  )
}