"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> {
  variant?: "grouped" | "split";
  align?: "start" | "end" | "center" | "justify" | "stack" | "space-between";
  children?: React.ReactNode;
  className?: string;
}

const ButtonGroupRoot = React.forwardRef<HTMLDivElement, ButtonGroupRootProps>(
  function ButtonGroupRoot(
    {
      variant = "grouped",
      align = "start",
      children,
      className,
      ...otherProps
    }: ButtonGroupRootProps,
    ref
  ) {
    return children ? (
      <div
        className={SubframeUtils.twClassNames(
          "group/e0379327 flex w-full items-center gap-2",
          {
            "justify-between [&>*]:rounded-md": align === "space-between",
            "flex-col": align === "stack",
            "justify-center": align === "center",
            "justify-end": align === "end",
            "gap-0": variant === "split",
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children}
      </div>
    ) : null;
  }
);

export const ButtonGroup = ButtonGroupRoot;