import { ReactNode } from "react";

import "./Name.css";

import { getCN, usePadding, randomId } from "../utils";

function Name({ children, before, after, ...props }: { [x: string]: any }) {
  if (!props.padding) props.padding = false;
  return (
    <div className={getCN(["MYUI-Name"])}>
    <div {...props} className={getCN(["MYUI-Name__in"])}>
      {before && <div className="MYUI-Name__before">{before}</div>}

      <div data-after={!!after} className="MYUI-Name__children">
        {children}
        {after && <div className="MYUI-Name__after">{after}</div>}
      </div>
    </div>
    </div>
  );
}

export default Name;