import * as React from "react";
import { CodeBlock, type CodeLang } from "@/components/ui/code-block";
import { cn } from "@/lib/utils";

/**
 * Renders an API response. Accepts either a JSON-serialisable value or a pre-formatted string.
 * The status line is coloured by class (2xx success, 4xx warning, 5xx danger).
 */
export function ResponseExample({
  status = 200,
  statusText,
  body,
  lang = "json",
  title,
  className,
  maxHeight = 480,
}: {
  status?: number;
  statusText?: string;
  body: unknown;
  lang?: CodeLang;
  title?: string;
  className?: string;
  maxHeight?: number | string;
}) {
  const code = typeof body === "string" ? body : JSON.stringify(body, null, 2);
  const label = title ?? `${status}${statusText ? ` ${statusText}` : status === 200 ? " OK" : ""}`;
  const tone = status >= 500 ? "danger" : status >= 400 ? "warning" : "success";
  return (
    <div className={cn("my-5", className)}>
      <CodeBlock
        code={code}
        lang={lang}
        title={label}
        maxHeight={maxHeight}
        className={cn(
          "[&>div:first-child>span]:font-medium",
          tone === "success" && "[&>div:first-child>span]:text-success",
          tone === "warning" && "[&>div:first-child>span]:text-warning",
          tone === "danger" && "[&>div:first-child>span]:text-danger",
        )}
      />
    </div>
  );
}