import { ReactNode } from "react";

import "./Placeholder.css";
import { renderProps, onLoad, getCN, get_typeName } from "../utils";

function Placeholder({
  children,
  icon,
  header,
  action,
  ...props
}: {
  [x: string]: any;
}) {
  return (
    <div {...props} className={getCN(["MYUI-Placeholder"], props.className)}>
      <div className={getCN(["MYUI-Placeholder__in"])}>
        {icon && <div className="MYUI-Placeholder__icon">{icon}</div>}
        {header && <div className="MYUI-Placeholder__header">{header}</div>}
        {children && (
          <div className="MYUI-Placeholder__children">{children}</div>
        )}
        {action && <div className="MYUI-Placeholder__action">{action}</div>}
      </div>
    </div>
  );
}

export default Placeholder;