"use client";
import { useContext, type ComponentProps } from "react";
import {
  GlassContext,
  GlassLayer,
  type GlassAppearance,
} from "./glass-surface.js";
export interface GlassButtonGroupProps
  extends ComponentProps<"div">, GlassAppearance {}
/** A visual group of ordinary buttons, not an implicit single-choice widget. */
export function GlassButtonGroup({
  shade,
  blur,
  refraction,
  dispersion,
  children,
  className = "",
  role = "group",
  ...props
}: GlassButtonGroupProps) {
  const inherited = useContext(GlassContext);
  const selected = shade ?? inherited.shade;
  return (
    <GlassContext.Provider value={{ shade: selected, group: true }}>
      <div
        {...props}
        role={role}
        className={`ynr-glass-button-group ${className}`}
      >
        <GlassLayer
          shade={selected}
          blur={blur}
          refraction={refraction}
          dispersion={dispersion}
          flat
        />
        {children}
      </div>
    </GlassContext.Provider>
  );
}