import { Box, TableToolbar } from '@wix/design-system';
import React, { ReactNode } from 'react';
import { st, classes } from './ToolbarItemBox.st.css.js';

export interface ToolbarItemBoxProps {
  dataHook?: string;
  layout?: 'button';
  expandable?: boolean;
  label?: ReactNode;
  removeStartPadding?: boolean;
  children?: ReactNode;
}
export function ToolbarItemBox(props: ToolbarItemBoxProps) {
  const { label, children, removeStartPadding, expandable, ...rest } = props;

  let child = children;

  if (label) {
    child = <Box marginLeft={2}>{child}</Box>;
  }

  return (
    <TableToolbar.Item
      className={st(classes.root, {
        removeStartPadding,
        expandable,
      })}
      {...rest}
    >
      {label && (
        <TableToolbar.Label dataHook="table-toolbar-label">
          {label}
        </TableToolbar.Label>
      )}
      {child}
    </TableToolbar.Item>
  );
}