import React, { useState } from 'react'
import styled from 'styled-components'
import UnunitedCom from './components/UnunitedCom'
import ConnectedCom from './components/Connected'
import RegimentalCom from './components/Regimental'

const MainDiv = styled.div`
  min-height: calc(100vh - 64px);
  background-image: url('/images/recommend/bg.svg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
`

const ContengDiv = 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%;
  }
`

const Recommend: React.FC = () => {
  //  邀请false普通邀请 true军团长邀请
  const [type, typeState] = useState(false)
  //  是否连接钱包
  const [status, statusState] = useState(true)

  return (
    <MainDiv>
      {type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
    </MainDiv>
  )
}
export default Recommend
