import React from 'react';
import PropTypes from 'prop-types';

export default function Layout({ children }) {
  
  //<link rel="stylesheet" href="/css/watson-react-components.min.css" />
  //<link rel="stylesheet" href="/css/style.css" />
  
  //<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
  //<script src="scripts/setup-client-recognition.js"></script>
  
  return (
    <html lang="en">
      <head>
        <title>Speech to Text Demo</title>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
        
        <link rel="stylesheet" href="/css/espn.css" />
        <link rel="stylesheet" href="/css/custom.css" />
      </head>
      <body>
        <svg width="0" height="0">
          <defs>
            <filter id="dropshadow" width="150%" height="150%" x="-25%" y="-25%">
              <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
              <feOffset dx="0" dy="0" result="offsetblur"/>
              <feComponentTransfer>
                <feFuncA type="linear" slope="0.9"/>
                <feFuncR type="discrete" tableValues="1"/>
                <feFuncG type="discrete" tableValues="1"/>
                <feFuncB type="discrete" tableValues="1"/>
              </feComponentTransfer>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
        </svg>
        <div id="root">
          {children}
        </div>
        <script type="text/javascript" src="scripts/bundle.js" />
        <script type="text/javascript" src="scripts/app.js" />
      </body>
    </html>
  );
}

Layout.propTypes = {
  children: PropTypes.object.isRequired, // eslint-disable-line
};