type ButtonProps = {
  log: (item: unknown) => void;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  title: string;
};

const Button: React.FC<ButtonProps> = ({ log, onClick, title }) => {
  return (
    <button
      onClick={(e) => {
        log(e);
        onClick(e);
      }}
    >
      {title}
    </button>
  );
};

function log(item: unknown) {
  console.log('Logger: ', item);
}

type LoggerProps = {
  render: (logFn: (item: unknown) => void) => React.ReactNode;
};

const Logger: React.FC<LoggerProps> = ({ render }) => {
  return <>{render(log)}</>;
};

const App: React.FC = () => {
  return (
    <div>
      <Logger
        render={(log) => (
          <Button
            log={log}
            onClick={() => console.log('click handled')}
            title="Click me"
          />
        )}
      />
    </div>
  );
};

export default App;

