import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

class AutoDestroy extends React.Component {
  state = {
    destroyed: false
  }

  componentDidMount() {
    setTimeout(
      () => this.setState({ destroyed: true }),
      this.props.millis,
    )
  }

  render() {
    return this.state.destroyed ? null : this.props.children;
  }
}

const withAutoDestroy = (millis, Component) => ({...props}) => (
  <AutoDestroy millis={millis}>
    <Component {...props} />
  </AutoDestroy>
)

const App = withAutoDestroy(3000, () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <AutoDestroy millis={2000}>
      <h2>Start editing to see some magic happen {'\u2728'}</h2>
    </AutoDestroy>
  </div>
));

render(<App />, document.getElementById('root'));