import { BoxDivProps, SilkeBox } from '../silke-box';
import ButtonContext from '../silke-button/context';
import TextFieldContext from '../silke-text-field/text-field-context';
import React from 'react';
import styles from './silke-toolbar.scss';
import { SilkeInputSize } from '../silke-text-field/silke-text-field';

type SilkeToolbarProps = {
  size?: SilkeInputSize;
} & Omit<BoxDivProps, 'height' | 'width' | 'tag'>;

export function SilkeToolbar({ size = 'base', children, className, ...rest }: SilkeToolbarProps) {
  let cl = styles.root;
  if (className) cl += ' ' + className;
  return (
    <ButtonContext size={size} kind="ghost">
      <TextFieldContext size={size} kind="ghost" inline>
        <SilkeBox tag="div" className={cl} height={size} {...rest}>
          {children}
        </SilkeBox>
      </TextFieldContext>
    </ButtonContext>
  );
}