import React, { useState, useEffect } from "react";
import { LEFT } from "react-swipeable";

const Start = (props) => {

    const route =  props.getValue;
    const kek = './circle.html'

    useEffect(() => {
        const handler = (ev: MessageEvent<{ type: string }>) => {
          if (typeof ev.data !== 'object') return
          if (!ev.data.type) return
          if (ev.data.type !== 'button-click') return
    
          route('/')
        }
    
        window.addEventListener('message', handler)
    
        // Don't forget to remove addEventListener
        return () => window.removeEventListener('message', handler)
      }, [])

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            alignContent: 'center',
            alignItems: 'center',
            flexWrap: 'wrap',
            justifyContent: 'space-evenly',
            height: '95vh',
            background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
            overflow: 'hidden',
        }}>
            <span style={{
                color: '#F68C43',
                width: '60%',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'start',
                fontWeight: 700,
                fontFamily: 'Raleway',
                fontSize: '40px',
            }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
            <iframe scrolling="no" src={kek} style={{
                overflow: 'hidden',
                border: 'none',
                width: '440px',
                height: '440px',
            }}></iframe>
        </div>
    ) 
};

export default Start;