import React from 'react';
import Result from 'antd/es/result';
import Typography from 'antd/es/typography';

const { Title, Paragraph, Text } = Typography;

type ErrorFallbackProps = Readonly<{
  error: Error;
  title: string;
  actions: React.ReactNode;
  fullPage?: boolean;
}>;

// The single place that decides whether a customer is shown a stack trace.
// Gated on DEV so a developer sees the throw immediately while a production
// bundle cannot render it at all — one decision in one file rather than the
// same judgement repeated at three mount points, where they would drift.
export default function ErrorFallback({ error, title, actions, fullPage = false }: ErrorFallbackProps) {
  return (
    <Result
      status="error"
      // antd's Result renders `title` as a plain div, with no heading
      // semantics — a screen-reader user navigating by headings would find
      // nothing on a page whose entire content is this error. Wrapped in
      // Title so the fallback has a real heading; do not simplify this back
      // to a bare string.
      title={
        <Title level={3} style={{ marginBottom: 0 }}>
          {title}
        </Title>
      }
      subTitle="This has been reported. Nothing you did caused it."
      style={{ paddingBlock: fullPage ? 64 : 24 }}
      extra={actions}
    >
      {import.meta.env.DEV ? (
        <Paragraph>
          <Text code>{error.message}</Text>
        </Paragraph>
      ) : null}
    </Result>
  );
}