import { useCollectionContext } from '@wix/bex-core/react';
import { Button } from '@wix/design-system';
import React, { MouseEvent as ReactMouseEvent } from 'react';

export interface PremiumButtonProps {
  onClick: (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
  text?: string;
}
export function PremiumButton(props: PremiumButtonProps) {
  const state = useCollectionContext();
  const { translate: t } = state;
  const { text, onClick } = props;

  return (
    <Button
      skin="premium"
      onClick={onClick}
      dataHook="empty-state-premium-button"
    >
      {text ?? t('cairo.emptyState.premium.cta')}
    </Button>
  );
}