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

interface CommonProps {
  /** Bar item could shrink and wrap content if there is not enough empty space */
  canShrink?: boolean;
  /** Bar item should fill empty space */
  isFilling?: boolean;
  /** Tag of the item */
  tag?: React.ElementType;
  /** Additional class name */
  className?: string;
  /** Child content */
  children?: React.ReactNode;
}

type BarItemProps = CommonProps & React.HTMLAttributes<HTMLElement>;

export const CLASS_ROOT = "bar__item";

const BarItem = React.forwardRef<HTMLElement, BarItemProps>((props, ref) => {
  const {
    className,
    tag = "div",
    isFilling,
    canShrink,
    children,
    ...other
  } = props;

  const Tag = tag;
  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--fill`]: isFilling,
      [`${CLASS_ROOT}--shrinkable`]: canShrink,
    },
    className,
  );

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

BarItem.displayName = "BarItem";

export { BarItem };