"use client";

import { AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/Button";

interface PageErrorProps {
  title?: string;
  message?: string;
  reset?: () => void;
}

/** Reusable error fallback for route error boundaries. */
export function PageError({
  title = "Something went wrong",
  message = "An unexpected error occurred. Please try again.",
  reset,
}: PageErrorProps) {
  return (
    <div className="flex min-h-[50vh] flex-col items-center justify-center px-6 py-16 text-center">
      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-danger-bg text-danger">
        <AlertTriangle className="h-6 w-6" />
      </div>
      <h2 className="text-lg font-bold text-navy">{title}</h2>
      <p className="mt-2 max-w-md text-sm text-muted">{message}</p>
      {reset && (
        <Button variant="primary" size="sm" className="mt-6" onClick={reset}>
          Try again
        </Button>
      )}
    </div>
  );
}