import React from 'react'
import styled from 'styled-components'
import Balance from 'components/Balance'
import { Text } from '@pancakeswap/uikit'

interface FlexProp {
  name?: string | number
  valueNum?: string | number
}

const ScoreItem = styled.div`
  width: 100%;
`

const ItemText = styled(Text)`
  text-align: center;
  font-size: 36px;
`

const ItemSubText = styled(Text)`
  text-align: center;
  font-size: 20px;
`

const FlexItemCom: React.FC<FlexProp> = ({ name, valueNum }) => {
  return (
    <ScoreItem>
      <Balance lineHeight="1" fontSize="36px" textAlign="center" decimals={0} value={Number(valueNum)} />
      <ItemSubText color="textSubtle">{name}</ItemSubText>
    </ScoreItem>
  )
}
export default FlexItemCom