GMW/services/frontend/src/components/shared/error-boundary.tsx

"use client";

import { AlertCircle, RefreshCw } from "lucide-react";
import { Component, type ReactNode } from "react";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}
interface State {
  hasError: boolean;
  error?: Error;
}

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <Card
            className={cn(
              "flex flex-col items-center gap-2 py-8",
              "border border-red-500/30 ring-red-500/20",
              "[--card-spacing:0px]",
              "rounded-2xl",
            )}
          >
            <AlertCircle className="size-6 text-destructive" />
            <p className="text-sm text-text-secondary">
              {this.state.error?.message || "Something went wrong"}
            </p>
            <button
              type="button"
              onClick={() => this.setState({ hasError: false })}
              className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors"
            >
              <RefreshCw className="size-3" /> Try again
            </button>
          </Card>
        )
      );
    }
    return this.props.children;
  }
}