import React, { useState } from 'react'
import styled from 'styled-components'
import { Flex, Text } from '@pancakeswap/uikit'

const FlexDiv = styled(Flex)`
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
`

export default function FlexCom({
  name,
  value,
  paddings = '0',
  leftColor = 'text',
  RightColor = 'textSubtle',
  color = '#1FC7D4',
}) {
  return (
    <FlexDiv style={{ padding: paddings }}>
      <Text color={leftColor}>{name}</Text>
      <Text color={RightColor}>{value}</Text>
    </FlexDiv>
  )
}