import React from 'react';
import { observer } from 'mobx-react-lite';
import { EmptyStateBase, EmptyStateBaseProps } from './EmptyStateBase';
import { CollectionPremiumEmptyStateIllustration } from '../Illustration/CollectionPremiumEmptyStateIllustration';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { PremiumButton, PremiumButtonProps } from './PremiumButton';

export interface CollectionPremiumEmptyStateProps
  extends Omit<Partial<EmptyStateBaseProps>, 'cta'> {
  /**
   * Configures 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 upgrade button, you must provide the `onClick` callback.
   * @external
   */
  upgradeCta: PremiumButtonProps;
}

function _CollectionPremiumEmptyState(props: CollectionPremiumEmptyStateProps) {
  const { translate: t } = useWixPatternsContainer();
  const { upgradeCta, ...rest } = props;

  return (
    <EmptyStateBase
      dataHook="premium-empty-state"
      title={t('cairo.emptyState.premium.title')}
      subtitle={t('cairo.emptyState.premium.text')}
      image={
        <CollectionPremiumEmptyStateIllustration data-hook="empty-state-premium-illustration" />
      }
      {...rest}
      cta={<PremiumButton {...upgradeCta} />}
    />
  );
}

export const CollectionPremiumEmptyState = observer(
  _CollectionPremiumEmptyState,
);