import { Link } from 'react-router-dom'
import { ConvertField, DirectionSwapButton } from '@shared/ui'
import { CommissionTable } from '@entities/commission'
import { useCurrencyConversion } from '@features/payment'
import { Title } from '@shared/ui/Title/Title'
import { ROUTES } from '@shared/config/routes'
import { USDT_RATE } from '@shared/config/constants'
import styles from './Converter.module.css'

export function Converter() {
  const { gasPriceRub, configUsdtRate, convert, pay, onSwap, commission } =
    useCurrencyConversion({ rateFallback: USDT_RATE })

  return (
    <section className={styles.section} id="converter">
      <div className={styles.wrap}>
        <div className={styles.header}>
          <div>
            <Title>Конвертация</Title>
            <div className={styles.subtitle}>Данные обновляются в реальном времени</div>
          </div>
          <div className={styles.pills}>
            <div className={styles.pill}>
              Цена газа в RUB <span className={styles.pillValue}>{gasPriceRub.toFixed(2)} RUB</span>
            </div>
            <div className={styles.pill}>
              USDT/RUB <span className={styles.pillValue}>{configUsdtRate.toFixed(2)} ₽</span>
            </div>
          </div>
        </div>

        <div className={styles.body}>
          <div>
            <div className={styles.tabs}>
              <div className={styles.tab} data-active>
                КУПИТЬ
              </div>
            </div>

            <ConvertField compact {...convert} />
            <DirectionSwapButton compact onClick={onSwap} />
            <ConvertField compact {...pay} />
          </div>

          <CommissionTable {...commission} />
        </div>

        <Link to={ROUTES.CONVERTER} className={styles.payBtn}>
          Перейти к оплате
        </Link>
      </div>
    </section>
  )
}
