import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

type ConfigContextBannerProps = {
  children: ReactNode;
  className?: string;
  /** Highlights read-only or draft-only hints. */
  emphasis?: boolean;
};

export function ConfigContextBanner({
  children,
  className,
  emphasis = false,
}: ConfigContextBannerProps) {
  return (
    <div
      className={cn(
        "rounded-lg border px-4 py-3 text-sm leading-relaxed",
        emphasis
          ? "border-primary/25 bg-accent/80 text-foreground"
          : "border-border/60 bg-muted/40 text-muted-foreground",
        className,
      )}
      role="status"
    >
      {children}
    </div>
  );
}

export function ConfigContextEmphasis({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <span className={cn("font-medium text-primary", className)}>
      {children}
    </span>
  );
}
