import React from "react";

export function ButtonGroup({ orientation = "horizontal", className = "", children, ...props }) {
  const cls = ["o-group", orientation === "vertical" ? "o-group--vertical" : "", className].filter(Boolean).join(" ");
  return <div className={cls} role="group" data-slot="group" data-orientation={orientation} {...props}>{children}</div>;
}

export function ButtonGroupText({ className = "", children, ...props }) {
  return <div className={["o-group__text", className].filter(Boolean).join(" ")} data-slot="group-text" {...props}>{children}</div>;
}

export function ButtonGroupSeparator({ className = "" }) {
  return <div className={["o-separator", className].filter(Boolean).join(" ")} data-slot="separator" data-orientation="vertical" />;
}
