import React from 'react';
interface ScanBudgetBannerProps {
  visible: boolean;
  onDismiss: () => void;
}

/**
 * Warning banner shown when the backend rejects a force-scan because the
 * per-week cost budget has been exhausted. Rendered as a warning (not an
 * error) since this is expected guardrail behavior.
 */
const ScanBudgetBanner = ({
  visible,
  onDismiss,
}: ScanBudgetBannerProps): JSX.Element | null => {
  if (!visible) return null;

  return (
    <div className="rounded-xl border border-yellow-200 bg-yellow-50 p-4 flex items-start justify-between gap-3">
      <div>
        <p className="text-sm font-semibold text-yellow-800">
          You&apos;ve reached this week&apos;s scan budget
        </p>
        <p className="mt-1 text-sm text-yellow-800">
          To keep costs predictable, we cap the number of force-scans per week.
          Your weekly automated scan will still run as usual.
        </p>
      </div>
      <button
        type="button"
        onClick={onDismiss}
        className="text-sm font-medium text-yellow-800 hover:text-yellow-900 flex-shrink-0"
        aria-label="Dismiss"
      >
        ×
      </button>
    </div>
  );
};

export default ScanBudgetBanner;