import React from 'react';

import styled from 'styled-components'
import ShinyProgressBar from './ShinyProgressBar.js'
import { Grid } from '@material-ui/core'

export default function LevelDescriptionCard(props) {

  return (
    <LevelDescDiv>
      <Grid container direction="row" justify="space-between" alignItems="center">
          <Grid item xs={6} md={4}>
            <CurrentLevelNumber>
              Nível {props.level}
            </CurrentLevelNumber>
            <CurrentLevelXP>
              XP {props.xp}
            </CurrentLevelXP>
          </Grid>
          <Grid item xs={6} md={4} alignContent='flex-end'>
            <CurrentCoins>
              {props.coins} COINS
            </CurrentCoins>
            <NextLevelXP>
              {props.xp_to_next_lvl} XP PARA O NÍVEL {props.level+1}
            </NextLevelXP>
          </Grid>
          <ShinyProgressBar percentage={props.bar_size} />
      </Grid>
    </LevelDescDiv>
  );
}

const NextLevelXP = styled.p`
  text-align: right;
  font-size: large;
  font-weight: 500;
  color: #575757;
  margin-right: 30px;
`

const CurrentCoins = styled.p`
  text-align: right;
  font-size: x-large;
  font-weight: 500;
  color: #575757;
  margin-right: 30px;
`

const CurrentLevelNumber = styled.h1`
  font-weight: 500;
  font-size: 40px;
  color: #646464;
  margin-left: 30px;
`

const CurrentLevelXP = styled.h2`
  font-size: x-large;
  font-weight: 500;
  color: #00A5B9;
  margin-left: 30px;
`

const LevelDescDiv = styled.div`
  margin: 20px;
  padding: 20px;
`