const comeUpWithUniqueClassName = () =>
  [...Array(5)]
    .map(() => String.fromCharCode(Math.floor(Math.random() * 26 + 65)))
    .join("");

function createAndInjectCSSClass(className, styles) {
  const regex = / \\n/;
  const style = styles[0].replace(regex);
  const styleSheet = document.styleSheets[0];
  styleSheet.insertRule(`
    .${className} {
      ${style}
    }
  `);
}

const styled = (Tag) => (styles) => {
  return function NewComponent(props) {
    const uniqueClassName = comeUpWithUniqueClassName();
    createAndInjectCSSClass(uniqueClassName, styles);
    console.log(uniqueClassName);
    return <Tag {...props} className={uniqueClassName} />;
  };
};

function Message({ children, ...delegated }) {
  console.log(delegated);
  // const styleSheet = document.styleSheets[0];

  return <p {...delegated}>You've received a message: {children}</p>;
}

const UrgentMessage = styled(Message)`
  background-color: pink;
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  border: 5px solid red;
  padding: 10px;
`;

function App() {
  return (
    <div>
      <UrgentMessage>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, rerum?
      </UrgentMessage>
    </div>
  );
}

export default App;