import React from 'react';
import { SecondaryActions } from '../SecondaryActions/SecondaryActions';
import { ActionSubitem } from '../ActionControl/ActionSubItemProps';
import { TableToolbar, Box } from '@wix/design-system';

export interface ToolbarSecondaryActionsProps {
  /**
   * The secondary actions to display in the toolbar.
   * @overrideType [ActionSubitem[]](./?path=/story/common-types--actionsubitem) | [ActionSubitem[][]](./?path=/story/common-types--actionsubitem)
   * @external
   */
  items: ActionSubitem[];
}

export function ToolbarSecondaryActions({
  items,
}: ToolbarSecondaryActionsProps) {
  return (
    <Box>
      {items.map((item, index) => {
        const dataHook = item.dataHook ?? 'toolbar-secondary-actions';

        return (
          <TableToolbar.Item key={index}>
            <SecondaryActions
              key={index}
              {...item}
              dataHook={`${dataHook}-${index}`}
            />
          </TableToolbar.Item>
        );
      })}
    </Box>
  );
}