import * as React from 'react';
import { BoxDivProps, SilkeBox } from '../silke-box';
import ButtonContext, { useButtonContext } from './context';
import { SilkeButtonKind, SilkeButtonSize } from './silke-button';
import styles from './silke-button.scss';

export type SilkeButtonSetProps = {
  /** All buttons will inherit kind */
  kind?: SilkeButtonKind;
  /** All buttons will inherit this size */
  size?: SilkeButtonSize;
  children: React.ReactNode;
} & Omit<BoxDivProps, 'size'>;

export function SilkeButtonSet({
  children,
  kind,
  size,
  className,
  gap,
  ...rest
}: SilkeButtonSetProps) {
  const context = useButtonContext();
  return (
    <ButtonContext
      {...context}
      gap={gap || 's'}
      kind={kind || context.kind}
      size={size || context.size}
    >
      <SilkeBox
        className={[styles.group, className].filter(Boolean).join(' ')}
        gap={gap || context.gap || 'm'}
        {...rest}
      >
        {children}
      </SilkeBox>
    </ButtonContext>
  );
}