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

const RequestId = React.lazy(() =>
  import(/* webpackChunkName: "RequestId" */ '../RequestId').then((module) => ({
    default: module.RequestId,
  })),
);

export interface CollectionErrorStateProps extends ErrorCardProps {
  /**
   * The `requestId` to display in the error state.
   */
  requestId?: string;
}

export const CollectionErrorState = ({
  dataHook = 'collection-error-state',
  title,
  subtitle,
  action,
  requestId,
}: CollectionErrorStateProps) => {
  const { environment } = useWixPatternsContainer();

  return (
    <Box direction="vertical" align="center" width="100%" padding="SP7 0">
      <EmptyState
        dataHook={dataHook}
        theme="page-no-border"
        title={title}
        subtitle={subtitle}
      >
        {action && (
          <TextButton
            dataHook="collection-error-state-action-button"
            prefixIcon={action?.prefixIcon}
            onClick={action?.onClick}
          >
            {action?.text}
          </TextButton>
        )}
      </EmptyState>
      {requestId && (
        <React.Suspense fallback={null}>
          <Box align="center" padding="SP2" position="absolute" bottom="0">
            <RequestId value={requestId} locale={environment.language} />
          </Box>
        </React.Suspense>
      )}
    </Box>
  );
};