import React from 'react';
import type { PrepaidNudgeProps } from '../core/types';

/**
 * C5 prepaid nudge — shown when COD is eligible to encourage prepaid checkout.
 */
const PrepaidNudge: React.FC<PrepaidNudgeProps> = ({ copy, ctaUrl, theme = 'light' }) => {
  const isDark = theme === 'dark';

  return (
    <div
      className={`qr-prepaid-nudge${isDark ? ' qr-prepaid-nudge--dark' : ''}`}
      role="complementary"
      aria-label="Prepaid offer"
    >
      <p className="qr-prepaid-nudge__copy">{copy}</p>
      {ctaUrl ? (
        <a
          href={ctaUrl}
          className="qr-btn qr-btn--primary qr-btn--sm qr-prepaid-nudge__cta"
          target="_blank"
          rel="noopener noreferrer"
        >
          Pay online instead
        </a>
      ) : null}
    </div>
  );
};

export default PrepaidNudge;