import type { MouseEventHandler } from 'react';
import type { ButtonGroupProps } from '@mui/material/ButtonGroup';

import type { DropDownMenuProps, DropdownMenuItem } from '../dropdown-menu';

interface ButtonsWithMenuProps {
  /**
   * Set the size of the buttons in group.
   * `small` is equivalent to the dense button styling.
   * @default 'medium'
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Number of buttons to display outside the menu.
   * @default 3
   */
  countOfVisible?: number;
  /**
   * Buttons array to display.
   */
  listItems: DropdownMenuItem[];
  /**
   * Callback which will be fired on button or menu item click.
   */
  clickHandler: (name: string | number) => MouseEventHandler<HTMLLIElement | HTMLButtonElement>;
  /**
   * Callback which will be fired on sort end.
   */
  onSortEnd?: DropDownMenuProps['onSortEnd'];
  /**
   * Callback which will be fired on delete icon click inside the menu.
   */
  handleDelete?: DropDownMenuProps['handleDelete'];
  /**
   * Props to be supplied directly into the ButtonGroup component.
   */
  buttonGroupProps?: Omit<ButtonGroupProps, 'size'>;
}

export type { ButtonsWithMenuProps };