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

const MainDiv = styled.div`
  width: 60%;
`
const HeaderFlex = styled(Flex)`
  padding-left: 20px;
`

const BuyButton = styled(Button)`
  width: 150px;
  border-radius: 50px;
  margin-left: 20px;
  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
`

const ContentFlex = styled(Flex)`
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
`

const InfoDiv = styled.div`
  width: calc(50% - 40px);
  margin: 0 20px;
  /* width: 400px; */
  min-width: 315px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 40px;
  box-sizing: border-box;
  margin-top: 50px;
  padding: 0 30px 35px 30px;
`
const ButtonDiv = styled(Button)`
  width: 100%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  border: 1px solid ${({ theme }) => theme.colors.primaryDark};
  color: ${({ theme }) => theme.colors.primaryDark};
`
export default function RegimentalCom() {
  const { t } = useTranslation()
  return (
    <MainDiv>
      <HeaderFlex>
        <Image src="/images/recommend/logo.svg" width={60} height={60} />
        <BuyButton>{t('buy again')}</BuyButton>
      </HeaderFlex>
      <ContentFlex>
        <InfoDiv>
          <HeaderMian title={t('recommend')} />
          <FlexCom name={t('The lower the number of')} value="100000(人)" />
          <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
        </InfoDiv>
        <InfoDiv>
          <HeaderMian title={t('Regimental recommendation')} />
          <FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
          <FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
          <FlexCom name={t('Number of secondary subordinates')} value="" />
          <FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
        </InfoDiv>
      </ContentFlex>
    </MainDiv>
  )
}