import { cn } from "@/lib/utils";
import type { ComponentProps } from "react";

export function SiteError({
  className,
  children,
  ...props
}: ComponentProps<"div">) {
  return (
    <main className="w-screen h-content flex items-center justify-center p-8">
      <div
        {...props}
        className={cn(
          "flex flex-col p-8 border bg-card rounded-2xl shadow-2xl",
          className
        )}
      >
        {children}
      </div>
    </main>
  );
}

export function SiteErrorTitle({ className, ...props }: ComponentProps<"h2">) {
  return (
    <h2
      {...props}
      className={cn("text-xl font-semibold leading-6", className)}
    />
  );
}

export function SiteErrorDescription({
  className,
  ...props
}: ComponentProps<"p">) {
  return (
    <p
      {...props}
      className={cn("mt-2 text-sm text-muted-foreground", className)}
    />
  );
}

export function SiteErrorActions({
  className,
  ...props
}: ComponentProps<"div">) {
  return (
    <p {...props} className={cn("mt-8 flex items-center gap-4", className)} />
  );
}