import type { ReactNode } from "react";
import { t } from "@lingui/core/macro";
import { PageShell } from "./PageShell.tsx";
import { ErrorCard } from "./ErrorCard.tsx";

export function PageError(
  { title, message, actions }: {
    title?: string;
    message: string;
    actions?: ReactNode;
  },
) {
  const resolvedTitle = title ?? t`Something went wrong`;
  return (
    <PageShell>
      <div className="page-error-wrap">
        <ErrorCard title={resolvedTitle} message={message} actions={actions} />
      </div>
    </PageShell>
  );
}