import React from 'react';
import { string } from 'prop-types';
import Flexbox from 'flexbox-react';

import * as S from './styles';

const DownloadApp = ({ userName, device, userId }) => (
  <a
    href={`${process.env.APP_DEEPLINK}?userId=${userId}`}
    style={{
      display: 'flex',
      position: 'relative',
      alignItems: 'center',
      alignSelf: 'center',
      textDecoration: 'none',
      color: 'unset',
      flexDirection: 'column',
      width: '93%',
      minHeight: '764px',
    }}
  >
    <Flexbox width="100%" style={{ marginTop: '30px' }}>
      <S.ForzaIcon>
        <span style={{
          height: 'auto',
          lineHeight: 'initial',
          top: '57px',
          position: 'absolute',
        }}
        >
          FC
        </span>
      </S.ForzaIcon>
      <Flexbox
        flexDirection="column"
        style={{
          color: 'white',
          fontFamily: 'SFPro',
          fontStyle: 'normal',
          fontWeight: '600',
          fontSize: '19px',
          lineHeight: '24px',
        }}
      >
        <div>Forza Challenge - </div>
        <div>Predict &amp; Win</div>
        <div style={{
          marginBottom: '26px',
          marginTop: '1px',
          fontWeight: 'normal',
          fontSize: '13px',
          lineHeight: '20px',
          color: '#758BA3',
        }}
        >
          Predict football matches
        </div>
        <S.GetButton>GET</S.GetButton>
      </Flexbox>
    </Flexbox>
    <Flexbox
      style={{
        fontFamily: 'SFPro', color: '#a0b1c4', marginTop: '20px', width: '100%',
      }}
      justifyContent="space-between"
    >
      <Flexbox flexDirection="column" style={{ marginRight: '20vw' }}>
        <div style={{ fontWeight: 'bolder' }}>5.0 &#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <div>
          28 ratings
          {' '}
          {device}
        </div>
      </Flexbox>
      <Flexbox flexDirection="column">
        <div style={{ fontWeight: 'bolder' }}>18+</div>
        <div style={{ fontWeight: 'thin' }}>Age</div>
      </Flexbox>
    </Flexbox>

    <Flexbox
      justifyContent="space-between"
      style={{
        backgroundColor: 'white',
        zIndex: '2',
        position: 'absolute',
        bottom: '260px',
        width: '260px',
        height: '40px',
        borderRadius: '10px',
        alignSelf: 'center',
      }}
    >
      <div style={{
        color: 'green',
        marginLeft: '17px',
        lineHeight: '43px',
        fontSize: '14px',
        fontFamily: 'SFPro',
      }}
      >
        &#8593; 5

      </div>
      <div style={{
        width: '60%',
        alignSelf: 'center',
        fontFamily: 'SFPro',
        fontStyle: 'normal',
        fontSize: '16px',
      }}
      >
        {userName}
      </div>
      <div style={{
        marginRight: '20px',
        alignSelf: 'center',
        fontFamily: 'SFPro',
        fontSize: '15px',
      }}
      >
        9
      </div>
    </Flexbox>
    <div style={{
      width: '50px',
      position: 'inherit',
      backgroundColor: '#73808e',
      bottom: '-255px',
      left: '7px',
      zIndex: '1',
    }}
    >
      &#8203;&#8203;

    </div>
    <S.Image
      src="/assets/download-app/challenge-screen.png"
      alt="Main bg"
      style={{
        width: '330px', maxHeight: '480px', position: 'inherit',
      }}
    />
  </a>
);

DownloadApp.propTypes = {
  device: string.isRequired,
  userId: string.isRequired,
  userName: string.isRequired,
};

export default DownloadApp;