import { ReactNode } from "react";

import "./Header.css";
import { getCN, usePadding, renderProps } from "../utils";

function Header({
  children,
  icon,
  mode = `default`, //default, primary
  ...props
}: {
  [x: string]: any;
}) {
  return (
    <div
      {...renderProps(props)}
      className={getCN(["MYUI-Header", `MYUI-Header--${mode}`])}
    >
      {icon && <div className="MYUI-Header--icon">{icon}</div>}
      {children}
    </div>
  );
}

export default Header;