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

/**
 * Warning banner shown when the backend rejects a force-scan because the
 * merchant has run out of credits. Rendered as a warning (not an error)
 * since this is expected behavior.
 */
const InsufficientCreditsBanner = ({
  visible,
  onDismiss,
}: InsufficientCreditsBannerProps): 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 don&apos;t have enough credits
        </p>
        <p className="mt-1 text-sm text-yellow-800">
          You don&apos;t have enough credits to run a scan right now. Top up
          your credits in Plans &amp; Billing to run another scan.
        </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 InsufficientCreditsBanner;