src/components/docs/CautionCallout.tsx

import clsx from "clsx";
import { AlertTriangle } from "lucide-react";
import type { ReactNode } from "react";

export interface CautionCalloutProps {
  /** mono kicker, e.g. "Caution · Label provenance" */
  eyebrow?: string;
  title: string;
  children: ReactNode;
  className?: string;
}

/**
 * Prominent amber caution block — reserved for contamination and
 * domain-validity warnings (--warn semantics only).
 */
export default function CautionCallout({
  eyebrow = "Caution",
  title,
  children,
  className,
}: CautionCalloutProps) {
  return (
    <aside
      role="note"
      className={clsx(
        "depth-1 rounded-sm border border-warn/30 bg-warn-dim p-5",
        className,
      )}
    >
      <div className="flex items-start gap-3">
        <AlertTriangle size={18} aria-hidden className="mt-0.5 shrink-0 text-warn" />
        <div>
          <p className="num text-[11px] uppercase tracking-[0.2em] text-warn">
            {eyebrow}
          </p>
          <h3 className="mt-1 font-display text-xl text-text">{title}</h3>
          <div className="mt-2 flex flex-col gap-2 text-[13px] leading-relaxed text-muted">
            {children}
          </div>
        </div>
      </div>
    </aside>
  );
}