import type { ComponentType } from 'react';

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={(event) => {
        log(event);
        onClick(event);
      }}
    >
      {title}
    </button>
  );
};

function withLogger<P extends { log: (item: unknown) => void }>(
  Component: ComponentType<P>
) {
  const log = (item: unknown) => {
    console.log('Logger:', item);
  };

  return function WithLogger(props: Omit<P, 'log'>) {
    return <Component {...(props as P)} log={log} />;
  };
}

const ButtonWithLogger = withLogger(Button);

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

export default App;

