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

const ButtonDiv = styled(Button)`
  width: 100%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
  color: ${({ theme }) => theme.colors.textDisabled};
`

const UpBtn = styled(Button)`
  width: 100%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
  border: none;
`

const FooterBtn = styled.div`
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
`

const ContentDiv = styled.div`
  width: 60%;
  background: rgba(255, 255, 255, 0.39);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
  border-radius: 40px;

  ${({ theme }) => theme.mediaQueries.sm} {
    width: 60%;
  }

  ${({ theme }) => theme.mediaQueries.lg} {
    width: 60%;
  }
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
  }
`

const MainDiv = styled.div`
  padding: 0 30px;
`
const FooterDiv = styled.div`
  margin: 0 auto 30px auto;
`
const TextDiv = styled(Text)`
  margin-top: 10px;
  font-size: 14px;
`
const LogoImage = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`

const RegimentalCom: React.FC = () => {
  const { t } = useTranslation()
  return (
    <ContentDiv>
      <MainDiv>
        <HeaderMain title={t('Regimental recommendation')} />
        <LogoImage>
          <Image src="/images/recommend/logo.svg" width={249} height={249} />
        </LogoImage>

        <>
          <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
          <FlexCom
            name={t('HCC total revenue percentage :10%')}
            paddings="0 10px"
            leftColor="textSubtle"
            value="100000.00(HCC)"
          />
          <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
          <FlexCom
            name={t('HCC total revenue percentage :10%')}
            paddings="0 10px"
            leftColor="textSubtle"
            value="100000.00(HCC)"
          />
          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
        </>

        <FooterBtn>
          <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
          {/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
        </FooterBtn>
        <FooterDiv>
          <TextDiv color="textSubtle">{t('each time')}</TextDiv>
          <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
          <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
        </FooterDiv>
      </MainDiv>
    </ContentDiv>
  )
}
export default RegimentalCom