import React, { ReactElement } from 'react';
import { LoadingErrorState } from '../ErrorState';
import { Page, PageProps } from '@wix/design-system';
import { PageErrorStateIllustration } from './PageErrorStateIllustration';
import { Refresh } from '@wix/wix-ui-icons-common';

export interface PageErrorStateProps extends PageProps {
  /**
   * Function, which will be executed on `Try Again` click.
   */
  onRetry?: () => void;
  /**
   * Error state title
   */
  title?: string;
  /**
   * Error state subtitle
   */
  subtitle: string;
  /**
   * Error state `Try Again` button text
   */
  retryText?: string;
  /**
   * Error state image
   */
  image?: ReactElement;
}

export function PageErrorState({
  onRetry,
  title,
  subtitle,
  retryText,
  image,
  dataHook,
}: PageErrorStateProps) {
  return (
    <Page dataHook={dataHook}>
      <Page.Header />
      <Page.Content>
        <LoadingErrorState
          title={title}
          subtitle={subtitle}
          action={
            retryText && onRetry
              ? {
                  text: retryText,
                  onClick: onRetry,
                  prefixIcon: <Refresh />,
                }
              : undefined
          }
          image={image ?? <PageErrorStateIllustration />}
          dataHook="page-error-state"
        />
      </Page.Content>
    </Page>
  );
}