import styles from './ConvertField.module.css'

export type Currency = 'USDT' | 'RUB'

export interface ConvertFieldData {
  value: string
  currency: Currency
  onChange?: (raw: string) => void
  error?: string
}

interface Props extends ConvertFieldData {
  label?: string
  compact?: boolean
}

export function ConvertField({ label, value, currency, onChange, error, compact }: Props) {
  const readOnly = !onChange

  return (
    <div className={compact ? `${styles.field} ${styles.compact}` : styles.field}>
      {label && <div className={styles.fieldLabel}>{label}</div>}
      <div className={styles.fieldInput}>
        <input
          type="text"
          value={value}
          onChange={onChange ? (e) => onChange(e.target.value) : undefined}
          readOnly={readOnly}
          placeholder="0"
          inputMode={readOnly ? undefined : 'decimal'}
        />
        <div className={styles.currency}>
          <span
            className={`${styles.currencyIcon} ${currency === 'USDT' ? styles.currencyUsdt : styles.currencyRub}`}
          >
            {currency === 'USDT' ? '₮' : '₽'}
          </span>
          {currency}
        </div>
      </div>
      {error && <div className={styles.fieldError}>{error}</div>}
    </div>
  )
}