import React from 'react';
import { useTranslation } from 'react-i18next';
import { Crown, ArrowRight, Zap } from 'lucide-react';

interface UpgradePromptProps {
  feature: string;
  currentLimit?: string;
  proLimit?: string;
  onUpgrade?: () => void;
  compact?: boolean;
}

/**
 * Professional Upgrade Prompt Component
 * 
 * Meggyőző, szép upgrade felhívás PRO verzióra
 */
export default function UpgradePrompt({
  feature,
  currentLimit,
  proLimit,
  onUpgrade,
  compact = false,
}: UpgradePromptProps) {
  const { t } = useTranslation();
  const defaultProLimit = proLimit || t('upgrade.unlimited');
  
  if (compact) {
    return (
      <div className="flex items-center gap-2 px-3 py-2 bg-amber-50 border border-amber-200 rounded-lg">
        <Crown size={16} className="text-amber-600 shrink-0" />
        <p className="text-sm text-gray-700">
          <strong className="text-amber-700">{feature}</strong> {t('upgrade.pro_only_feature')}
        </p>
        {onUpgrade && (
          <button
            onClick={onUpgrade}
            className="ml-auto text-sm font-semibold text-amber-600 hover:text-amber-700 underline"
          >
            {t('upgrade.upgrade_button_short')}
          </button>
        )}
      </div>
    );
  }
  
  return (
    <div className="bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-50 border-2 border-amber-300 rounded-xl p-6 shadow-lg">
      <div className="flex items-start gap-4">
        <div className="p-3 bg-amber-400 rounded-full shadow-md">
          <Crown size={28} className="text-white" fill="white" />
        </div>
        
        <div className="flex-1">
          <h3 className="text-xl font-bold text-gray-900 mb-2 flex items-center gap-2">
            <span>{feature}</span>
            <span className="px-2 py-0.5 bg-amber-400 text-white text-xs font-bold rounded uppercase">
              {t('upgrade.pro_badge')}
            </span>
          </h3>
          
          <p className="text-gray-700 mb-4">
            {t('upgrade.description')}
          </p>
          
          {currentLimit && (
            <div className="flex items-center gap-4 mb-4">
              <div className="flex-1 p-3 bg-white rounded-lg border border-gray-200">
                <div className="text-xs text-gray-500 uppercase font-semibold mb-1">{t('upgrade.free_label')}</div>
                <div className="text-lg font-bold text-gray-700">{currentLimit}</div>
              </div>
              
              <ArrowRight size={20} className="text-amber-500 shrink-0" />
              
              <div className="flex-1 p-3 bg-gradient-to-br from-amber-100 to-yellow-100 rounded-lg border-2 border-amber-300">
                <div className="text-xs text-amber-700 uppercase font-semibold mb-1 flex items-center gap-1">
                  <Zap size={12} />
                  <span>{t('upgrade.pro_label')}</span>
                </div>
                <div className="text-lg font-bold text-amber-700">{defaultProLimit}</div>
              </div>
            </div>
          )}
          
          {onUpgrade && (
            <button
              onClick={onUpgrade}
              className="
                inline-flex items-center gap-2 px-6 py-3
                bg-gradient-to-r from-amber-500 to-yellow-500
                hover:from-amber-600 hover:to-yellow-600
                text-white font-bold rounded-lg
                shadow-lg hover:shadow-xl
                transition-all duration-200
                transform hover:scale-105
              "
            >
              <Crown size={18} fill="white" />
              <span>{t('upgrade.upgrade_button')}</span>
              <ArrowRight size={18} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}