import React from 'react';
import {useContext} from 'react';
import {connect} from 'react-redux';

import ThemeContext from './shared/ThemeContext';
import lazyLegacyRoot from './lazyLegacyRoot';

// Lazy-load a component from the bundle using legacy React.
const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting'));

function AboutPage({counter, dispatch}) {
  const theme = useContext(ThemeContext);
  return (
    <>
      <h2>src/modern/AboutPage.js</h2>
      <h3 style={{color: theme}}>
        This component is rendered by the outer React ({React.version}).
      </h3>
      <Greeting />
      <br />
      <p>
        Counter: {counter}{' '}
        <button onClick={() => dispatch({type: 'increment'})}>+</button>
      </p>
    </>
  );
}

function mapStateToProps(state) {
  return {counter: state};
}

export default connect(mapStateToProps)(AboutPage);