import React from 'react';
import { observer } from 'mobx-react-lite';
import { AddItemEmptyState } from '../Illustration/AddItemEmptyState';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { EmptyStateBase, EmptyStateBaseProps } from './EmptyStateBase';
import { NewItemButton, NewItemButtonProps } from './NewItemButton';

export interface CollectionEmptyStateProps
  extends Omit<Partial<EmptyStateBaseProps>, 'cta'> {
  /**
   * Configuration for the default call to action button.\
   * `onClick`: Adds a callback for when the button is clicked. <br>
   * `text`: Text of the button.
   *  To render the default add new item button, you must provide the `onClick` callback.
   * @external
   */
  addNewCta?: NewItemButtonProps;
}

function _CollectionEmptyState(props: CollectionEmptyStateProps) {
  const { translate: t } = useWixPatternsContainer();
  const { addNewCta } = props;

  return (
    <EmptyStateBase
      dataHook="collection-empty-state"
      title={t('cairo.emptyState.additem.title')}
      subtitle={t('cairo.emptyState.additem.text')}
      image={
        <AddItemEmptyState data-hook="empty-state-new-item-illustration" />
      }
      {...props}
      cta={addNewCta && <NewItemButton {...addNewCta} />}
    />
  );
}

export const CollectionEmptyState = observer(_CollectionEmptyState);