import * as React from "react";
import { Alert } from "@/components/ui/alert";
import { cn } from "@/lib/utils";

/** Documentation callout built on the shared `Alert`. */
export function Callout({
  variant = "info",
  title,
  children,
  className,
}: {
  variant?: "info" | "success" | "warning" | "danger";
  title?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <Alert variant={variant} title={title} className={cn("my-5 [&_code]:rounded-[4px] [&_code]:border [&_code]:border-border [&_code]:bg-bg/60 [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[0.88em] [&_a]:font-medium [&_a]:text-accent [&_a]:underline [&_a]:underline-offset-2", className)}>
      {children}
    </Alert>
  );
}

/** Standard notice for features that are not yet available. */
export function ComingSoon({ children, title = "Not yet available" }: { children?: React.ReactNode; title?: React.ReactNode }) {
  return (
    <Callout variant="warning" title={title}>
      {children ?? "This capability is planned but not live yet. The documentation below describes the intended design so you can plan ahead; nothing on this page is callable today."}
    </Callout>
  );
}