import React, { Component } from 'react';
import ChristmasForm from './form'
import './App.css';
import { MdWarning as WarningIcon } from 'react-icons/md'
import { TiTree as TreeIcon } from 'react-icons/ti'
import { FaSmileWink as WinkEmoji } from 'react-icons/fa'

const styles = {
  row: {
    display: 'inline-block'
  },
  main: {
    // display: 'flex'
  },
  meat: {
    flex: 3,
    backgroundColor: '#ffffff'
  },
  warning: {
    display: 'inline-block',
    color: 'yellow',
    fontSize: '36pt'
  },
  tree: {
    display: 'block',
    fontSize: '48pt',
    color: 'green'
  },
  spin: {
    animation: 'App-logo-spin infinite 20s linear'
  },
  logo: {
    backgroundImage:`url(${require('./invite.jpeg')})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'contain',
    width: '20em',
    height: '26em'
  },
  columnLeft: {
    flex: 1,
    backgroundColor: '#ff0000'
  },
  columnRight: {
    flex: 1,
    backgroundColor: '#ff0000'
  }
}

class App extends Component {

  testClick = async () => {
    await fetch('http://localhost:3002/test', {
      method: 'POST',
      body: { test: 'test body' }
    })
  }

  render() {
    return (
      <div className="App" style={styles.main}>

        <header className="App-header" style={styles.meat}>
          <div id='main-image' style={styles.logo}/>
          <ChristmasForm />
        </header>

      </div>
    );
  }
}

export default App;