import React, { memo } from 'react'
import { Text } from 'react-native'
import { isEqual } from 'lodash'

import { formatValue } from '../../utils/formats'
import { CellProps } from './TableTypes'
import { styles } from './TableRow'

const NumberCell = ({ cell, theme }: CellProps): JSX.Element => {
  console.log('NumberCell', cell)
  const { binding, value } = cell

  const displayValue = binding?.format
    ? formatValue(binding, value, binding.format)
    : value

  return <Text style={[styles.cellText, theme.cellText]}>{displayValue}</Text>
}

export default memo(NumberCell, isEqual)