import React from 'react'
import { FormattedText } from './FormattedText'

type Props = {
  name: string
  nameFormat: any
  value: number
  valueFormat: any
  prefix: string
  suffix: string
  gap: number
}

export const CurrencyItem: React.FunctionComponent<Props> = (props) => {
  const { name, nameFormat, value, valueFormat, prefix, suffix, gap } = props
  const formattedValue = new Intl.NumberFormat('es-ES', valueFormat).format(value)
  const targetCurrencyText = [prefix, formattedValue, suffix].join('')

  return (
    <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center' }}>
      <div style={{ display: 'flex', marginRight: `${gap}%` }}>
        <FormattedText format={nameFormat} text={name} />
      </div>
      <div style={{ display: 'flex', marginLeft: `${gap}%`, flex: 1 }}>
        <FormattedText format={valueFormat} text={targetCurrencyText} />
      </div>
    </div>
  )
}
