import { Button } from "@tailor-platform/app-shell";

interface ErrorFallbackProps {
  title?: string;
  message?: string;
  onReset?: () => void;
}

export const ErrorFallback = ({
  title = "Something went wrong",
  message = "An error occurred while loading this content.",
  onReset,
}: ErrorFallbackProps) => {
  return (
    <div className="flex flex-col items-center justify-center gap-4 rounded-lg border border-destructive/20 bg-destructive/5 p-8">
      <div className="text-center">
        <h2 className="text-lg font-semibold text-destructive">{title}</h2>
        <p className="mt-1 text-sm text-muted-foreground">{message}</p>
      </div>

      {onReset && (
        <Button variant="outline" onClick={onReset}>
          Try again
        </Button>
      )}
    </div>
  );
};
