import { Component, ReactNode } from "react";
import { Card, Text } from "@mantine/core";
import { Trans } from "@lingui/react/macro";

interface QuietBoundaryProps {
  children: ReactNode;
}

interface QuietBoundaryState {
  hasError: boolean;
}

export class QuietBoundary extends Component<QuietBoundaryProps, QuietBoundaryState> {
  state: QuietBoundaryState = { hasError: false };

  static getDerivedStateFromError(): QuietBoundaryState {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return (
        <Card withBorder radius="md" p="md">
          <Text size="sm" c="dimmed">
            <Trans>Unavailable right now</Trans>
          </Text>
        </Card>
      );
    }
    return this.props.children;
  }
}

export default QuietBoundary;