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

type BarAlign = "start" | "end" | "center";
type BarSpace = "small" | "large";

interface BarProps extends React.HTMLAttributes<HTMLElement> {
  /** Flex vertical alignment */
  align?: BarAlign;
  /** Allow horizontally stacked items to wrap into new lines */
  canWrap?: boolean;
  /** Stack BarItems vertically */
  isVertical?: boolean;
  /** Item spacing */
  space?: BarSpace;
  /** Html tag to render */
  tag?: React.ElementType;
  /** Additional class names */
  className?: string;
  /** Child content */
  children?: React.ReactNode;
}

export const CLASS_ROOT = "bar";

const Bar = React.forwardRef<HTMLElement, BarProps>((props, ref) => {
  const {
    align,
    canWrap = true,
    isVertical,
    space,
    tag: Tag = "div",
    className,
    children,
    ...other
  } = props;

  const classes = cx(
    CLASS_ROOT,
    {
      [`align-items-${align}`]: align,
      [`${CLASS_ROOT}--vertical`]: isVertical,
      [`${CLASS_ROOT}--nowrap`]: !canWrap,
      [`${CLASS_ROOT}--space-${space}`]: space,
    },
    className,
  );

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

Bar.displayName = "Bar";

export { Bar };