import React, { ReactElement } from 'react';
import { EmptyState, TextButton } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface LoadingErrorStateProps {
  dataHook?: string;
  image?: ReactElement;
  title?: string;
  subtitle?: string;
  action?: {
    text: string;
    onClick?: () => void;
    prefixIcon?: ReactElement;
  };
}

export function LoadingErrorState(props: LoadingErrorStateProps) {
  const { dataHook, title, subtitle, image, action, ...rest } = props;
  const { translate: t } = useWixPatternsContainer();

  return (
    <EmptyState
      theme="page-no-border"
      dataHook={dataHook}
      title={
        title ??
        t('cairo.technical.error.title', {
          defaultValue: 'We couldn’t load your items',
        })
      }
      subtitle={
        subtitle ??
        t('cairo.technical.error.text', {
          defaultValue:
            'There was a technical problem on our end. Refresh the page and try again in a moment.',
        })
      }
      image={image}
      {...rest}
    >
      {action && (
        <TextButton
          onClick={action.onClick}
          prefixIcon={action.prefixIcon}
          dataHook="retry-button"
        >
          {action.text}
        </TextButton>
      )}
    </EmptyState>
  );
}