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

interface FlexProps {
  name: string
  value: string | number
  paddings?: string
  leftColor?: string
  rightColor?: string
  typeLink?: string
  size?: string
  textColor?: string
  rightSize?: string
}

const FlexDiv = styled(Flex)`
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  & > .linkText:hover {
    color: #1fc7d4 !important;
    border-bottom: 1px solid #1fc7d4 !important;
  }
`
const TextLink = styled(Text)`
  cursor: pointer;
`

const FlexCom: React.FC<FlexProps> = ({
  name,
  value,
  paddings = '0px',
  leftColor = '#666666',
  rightColor = 'textSubtle',
  typeLink,
  size = '14px',
  textColor = '#666666',
  rightSize = '14px',
}) => {
  const openPage = () => {
    window.open(typeLink)
  }

  return (
    <FlexDiv style={{ padding: paddings }}>
      <Text style={{ fontSize: size, color: leftColor }}>{name}</Text>
      {typeLink ? (
        <TextLink
          color={rightColor}
          style={{ color: textColor, borderBottom: `1px solid ${textColor}` }}
          onClick={openPage}
          className="linkText"
        >
          {value}
        </TextLink>
      ) : (
        <Text style={{ color: textColor, fontSize: rightSize }}>{value}</Text>
      )}
    </FlexDiv>
  )
}
export default FlexCom