"use client";
/*
 * Documentation:
 * Button Group — https://app.subframe.com/f023064a5ca0/library?component=Button+Group_e0379327-50f0-4852-9ae1-ad09b4bf01d3
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface ButtonGroupRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  vertical?: boolean;
  align?: "start" | "center" | "end" | "stretch";
  children?: React.ReactNode;
  className?: string;
}

const ButtonGroupRoot = React.forwardRef<HTMLDivElement, ButtonGroupRootProps>(
  function ButtonGroupRoot(
    {
      vertical = false,
      align = "start",
      children,
      className,
      ...otherProps
    }: ButtonGroupRootProps,
    ref
  ) {
    return children ? (
      <div
        className={SubframeUtils.twClassNames(
          "group/e0379327 flex w-full items-center gap-2",
          {
            "justify-start items-stretch [&>*]:grow [&>*]:basis-0":
              align === "stretch",
            "justify-end": align === "end",
            "justify-center": align === "center",
            "flex-col items-start": vertical,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children}
      </div>
    ) : null;
  }
);

export const ButtonGroup = ButtonGroupRoot;