import { forwardRef } from "react";

/**
 * Join
 *
 * vertical: boolean - stacks children vertically (default: horizontal)
 *
 * Add className="prs-join-item" to each child that should share joined borders.
 */
const Join = forwardRef(function Join(
  { vertical = false, className = "", children, ...props },
  ref
) {
  const classes = [
    "prs-join",
    vertical && "prs-join-vertical",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div ref={ref} className={classes} {...props}>
      {children}
    </div>
  );
});

export default Join;