"use client";

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

export interface ErrorStateProps {
  title?: string;
  description?: string;
  onRetry?: () => void;
}

export function ErrorState({
  title = "Something went wrong",
  description = "The page failed to load. This has been logged; please try again.",
  onRetry,
}: ErrorStateProps) {
  return (
    <div className="flex flex-col items-center gap-4 py-20 text-center" role="alert">
      <AlertOctagon className="size-10 text-error" aria-hidden="true" />
      <h2 className="font-display text-h2 font-normal text-ink">{title}</h2>
      <p className="max-w-md text-body-md text-ink-soft">{description}</p>
      {onRetry && (
        <Button variant="secondary" size="md" className="mt-2" onClick={onRetry}>
          Try Again
        </Button>
      )}
    </div>
  );
}