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

const ModalDiv = styled(Modal)`
  & > .jCXCIB {
    border-bottom: none;
    text-align: center;
    & > .hMvvbb {
      justify-content: center;
    }
  }
`

const InfoDiv = styled.div`
  box-sizing: border-box;
  padding: 30px 26px;
  /* width: calc(100% - 280px); */
  margin-left: 2rem;
  box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
`
const UpBtn = styled(Button)`
  width: 40%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
  border: none;
`

export default function BuyNftModal() {
  const { t } = useTranslation()

  const onDismiss = () => {
    console.log('aaa')
  }
  return (
    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
        <Image src="/images/recommend/logo.svg" width={300} height={300} marginBottom="20px" />
        <InfoDiv>
          <TextFlex
            text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
            color="#FEFDF1"
          />
          <TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
          <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
          <FlexCom name={t('First stage sharing ratio')} value="10％" />
          <FlexCom name={t('Secondary split ratio')} value="5％" />
        </InfoDiv>
      </Flex>

      <Flex>
        <UpBtn>{t('Buy It Now')}</UpBtn>
      </Flex>
    </ModalDiv>
  )
}