import { AlertCircle } from 'lucide-react';
import { useTranslation } from '@/i18n/TranslationProvider';

interface PendingPaymentBannerProps {
  planName: string;
  variant: 'dashboard' | 'subscription';
  onNavigate?: () => void;
}

export function PendingPaymentBanner({ planName, variant, onNavigate }: PendingPaymentBannerProps) {
  const { t } = useTranslation();
  return (
    <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 flex items-center justify-between gap-4">
      <div className="flex items-center gap-3">
        <AlertCircle className="h-5 w-5 text-orange-600 flex-shrink-0" />
        <p
          className="text-sm text-orange-800"
          dangerouslySetInnerHTML={{ __html: t('subscription.completePending', { plan: planName }) }}
        />
      </div>
      {variant === 'dashboard' && onNavigate && (
        <button
          onClick={onNavigate}
          className="flex-shrink-0 bg-orange-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-orange-700 transition-colors"
        >
          {t('subscription.goToSubscription')}
        </button>
      )}
    </div>
  );
}