import React 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)`
  width: 80%;

  ${({ theme }) => theme.mediaQueries.xs} {
  }
`

const InfoDiv = styled.div`
  box-sizing: border-box;
  padding: 30px 26px;
  margin-left: 60px;
  box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
  ${({ theme }) => theme.mediaQueries.xs} {
    padding: 20px 10px;
    margin-left: 0;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    padding: 30px 26px;
    margin-left: 60px;
  }
`
const UpBtn = styled(Button)`
  width: 50%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
  border: none;
`
const ImageDiv = styled(Image)`
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 150px;
    height: 150px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    width: 300px;
    height: 300px;
  }
`

const BuyNftModal: React.FC = () => {
  const { t } = useTranslation()

  // const onDismiss = () => {}
  return (
    <ModalDiv title={t('Buy commander NFT')}>
      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
        <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} 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％" />
          <FlexCom name={t('Contract address')} value={t('Contract address')} />
          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
        </InfoDiv>
      </Flex>

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