import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Button, Heading, Text } from '@pancakeswap/uikit'

const HeadingDiv = styled(Heading)`
  padding-top: 90px;
`

const ButtonDiv = styled(Button)`
  width: 80%;
  margin: 80px auto 10px auto;
  margin-left: 10%;
  border-radius: 50px;
`
const FooterDiv = styled.div`
  width: 80%;
  margin: 0 auto 30px auto;
  margin-left: 10%;
`
const TextDiv = styled(Text)`
  margin-top: 10px;
  font-size: 14px;
`

const UnunitedCom: React.FC = () => {
  const { t } = useTranslation()
  return (
    <>
      <HeadingDiv scale="xl" mb="24px" textAlign="center">
        {t('recommend')}
      </HeadingDiv>
      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
      <FooterDiv>
        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
      </FooterDiv>
    </>
  )
}
export default UnunitedCom