import React, { MouseEvent as ReactMouseEvent } from 'react';
import { useCollectionContext } from '@wix/bex-core/react';
import { TextButton } from '@wix/design-system';
import { Add } from '@wix/wix-ui-icons-common';

export interface NewItemButtonProps {
  onClick?: (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
  text?: string;
}

export function NewItemButton(props: NewItemButtonProps) {
  const state = useCollectionContext();
  const { translate: t } = state;
  const { onClick, text } = props;

  return (
    <TextButton
      onClick={onClick}
      prefixIcon={<Add />}
      dataHook="empty-state-new-item-button"
    >
      {text ?? t('cairo.emptyState.additem.cta')}
    </TextButton>
  );
}