import cx from "classnames";
import React from "react";

interface BarBreakProps extends React.HTMLAttributes<HTMLElement> {
  /** HTML tag to render the compontent with */
  tag?: React.ElementType;
  /** Additional class names */
  className?: string;
  /** Child content */
  children?: React.ReactNode;
}

export const CLASS_ROOT = "bar__break";

const BarBreak = React.forwardRef<HTMLElement, BarBreakProps>((props, ref) => {
  const { className, tag: Tag = "div", children, ...other } = props;

  const classes = cx(CLASS_ROOT, className);

  return (
    <Tag className={classes} ref={ref} {...other}>
      {children}
    </Tag>
  );
});

BarBreak.displayName = "BarBreak";

export { BarBreak };