import React from 'react';
import type { ReactNode } from 'react';

import { Group, type GroupProps } from '@shoptet/ui-core-web';
import type { SafePick } from '@shoptet/utils';

export interface ToolbarGroupOwnProps {
  /**
   * Accessible label for this group of controls.
   */
  label: string;
  children?: ReactNode;
}

export interface ToolbarGroupProps extends ToolbarGroupOwnProps, SafePick<GroupProps, 'ref'> {}

export function ToolbarGroup({ label, children, ref, ...rest }: ToolbarGroupProps) {
  return (
    <Group {...rest} label={label} ref={ref} className='toolbarGroup'>
      {children}
    </Group>
  );
}