import React from 'react';
import Flexbox from 'flexbox-react';
import { useRouter } from 'next/router';
import { osName, MobileView } from 'react-device-detect';

import * as S from './styles';
import DownloadApp from '../../components/DownloadApp';

const DownloadAppContainer = () => {
  const { query } = useRouter();
  const { firstName, lastName, userId } = query;
  return (
    <div style={{ height: '100%', position: 'relative', alignItems: 'center' }}>
      <MobileView>
        <S.Image src="/assets/download-app/finish_cover_img.png" alt="Main bg" />
      </MobileView>
      <Flexbox flexDirection="column" style={{ alignItems: 'center', height: '100%' }}>
        <S.Span style={{ marginTop: '16vw' }}>
          Your predictions
          <br />
          have been saved,
          <br />
          {firstName || 'fella'}
          !✨
        </S.Span>

        <S.Span style={{
          fontSize: '15px',
          fontWeight: 'normal',
          height: 'auto',
          lineHeight: '22px',
          marginTop: '36px',
          letterSpacing: ' 0.1px',
        }}
        >
          <>Follow your progress &amp; know if you win via</>
          <br />
          {' '}
          <strong>ForzaChallenge mobile app</strong>
          {' '}
        </S.Span>
        <DownloadApp
          device={osName}
          userId={userId}
          userName={firstName ? `${firstName} ${lastName}` : 'You!'}
        />
      </Flexbox>
    </div>
  );
};
DownloadAppContainer.propTypes = {

};

export default DownloadAppContainer;