import * as React from 'react';
import { AlertTriangle } from 'lucide-react';

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

/**
 * Compact amber-bordered alert callout. Replaces the dozen-plus ad-hoc
 * `border-amber-{200,300} bg-amber-50` `<div>`s scattered through the
 * codebase that the ui/ux audit (L5) flagged as drift.
 *
 * Renders a leading triangle icon by default; pass `icon={false}` to
 * suppress when the surrounding layout already conveys the warning
 * semantics. The icon is `aria-hidden` because the text content always
 * carries the meaning.
 */
export interface WarningCalloutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  /** Optional pre-content heading rendered bolder than the body. */
  title?: React.ReactNode;
  /** Set false to suppress the leading icon. */
  icon?: boolean;
}

export function WarningCallout({
  title,
  icon = true,
  className,
  children,
  ...rest
}: WarningCalloutProps) {
  return (
    <div
      role="status"
      className={cn(
        'rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900',
        className,
      )}
      {...rest}
    >
      <div className="flex items-start gap-2">
        {icon ? <AlertTriangle aria-hidden className="mt-0.5 size-4 shrink-0" /> : null}
        <div className="min-w-0 flex-1 space-y-1">
          {title ? <div className="font-medium">{title}</div> : null}
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}
