import React, { Component } from 'react';
import { render } from 'react-dom';
import { ClientHintsProvider, useClientHints } from 'react-client-hints';

const Hello = () => {
  const ch = useClientHints();
  return <div>Platform: {ch && ch.platform}</div>;
};

const App = () => {
  return (
    <ClientHintsProvider>
      <Hello />
    </ClientHintsProvider>
  );
};

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

// SSR with compatible header object
const el = (
  <ClientHintsProvider header={request.headers}>
    <ClientHints>{ch => ch.platform}</ClientHints>
  </ClientHintsProvider>
);

ReactDOMServer.renderToString(el);