dewedev/src/components/ProBadge.js

import React from 'react';
import { Crown, Lock } from 'lucide-react';

/**
 * ProBadge Component
 * 
 * Displays a PRO badge for premium features
 * Can be used inline or as a button to trigger upgrade flow
 */
const ProBadge = ({ 
  variant = 'badge', // 'badge' | 'button' | 'inline'
  size = 'sm', // 'xs' | 'sm' | 'md' | 'lg'
  onClick = null,
  showIcon = true,
  className = ''
}) => {
  
  const sizeClasses = {
    xs: 'text-xs px-1.5 py-0.5',
    sm: 'text-xs px-2 py-1',
    md: 'text-sm px-3 py-1.5',
    lg: 'text-base px-4 py-2'
  };
  
  const iconSizes = {
    xs: 'h-2.5 w-2.5',
    sm: 'h-3 w-3',
    md: 'h-4 w-4',
    lg: 'h-5 w-5'
  };
  
  if (variant === 'inline') {
    return (
      <span className={`inline-flex items-center gap-1 text-amber-600 dark:text-amber-400 font-semibold ${className}`}>
        {showIcon && <Crown className={iconSizes[size]} />}
        <span className={sizeClasses[size]}>PRO</span>
      </span>
    );
  }
  
  if (variant === 'button') {
    return (
      <button
        onClick={onClick}
        className={`inline-flex items-center gap-1.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-semibold rounded-full transition-all transform hover:scale-105 ${sizeClasses[size]} ${className}`}
      >
        {showIcon && <Crown className={iconSizes[size]} />}
        Upgrade to PRO
      </button>
    );
  }
  
  // Default badge variant
  return (
    <span className={`inline-flex items-center gap-1 bg-gradient-to-r from-amber-500 to-orange-500 text-white font-bold rounded-full ${sizeClasses[size]} ${className}`}>
      {showIcon && <Crown className={iconSizes[size]} />}
      PRO
    </span>
  );
};

/**
 * ProFeatureLock Component
 * 
 * Displays a locked feature message with upgrade prompt
 */
export const ProFeatureLock = ({ 
  featureName,
  featureDescription,
  onUpgrade = null,
  compact = false
}) => {
  const handleUpgrade = () => {
    if (onUpgrade) {
      onUpgrade();
    } else {
      // Default: scroll to top and show upgrade info
      window.scrollTo({ top: 0, behavior: 'smooth' });
      alert('Upgrade to PRO to unlock this feature!\n\nPRO features will be available soon.');
    }
  };
  
  if (compact) {
    return (
      <div className="flex items-center gap-2 p-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
        <Lock className="h-4 w-4 text-amber-600 dark:text-amber-400 flex-shrink-0" />
        <span className="text-sm text-amber-800 dark:text-amber-300 flex-1">
          <ProBadge variant="inline" size="xs" showIcon={false} /> feature
        </span>
        <button
          onClick={handleUpgrade}
          className="text-xs text-amber-700 dark:text-amber-300 hover:underline font-medium whitespace-nowrap"
        >
          Upgrade
        </button>
      </div>
    );
  }
  
  return (
    <div className="p-4 bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-2 border-amber-200 dark:border-amber-700 rounded-lg">
      <div className="flex items-start gap-3">
        <div className="p-2 bg-amber-100 dark:bg-amber-800/50 rounded-lg">
          <Lock className="h-5 w-5 text-amber-600 dark:text-amber-400" />
        </div>
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <h4 className="font-semibold text-gray-900 dark:text-gray-100">
              {featureName}
            </h4>
            <ProBadge size="sm" />
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
            {featureDescription}
          </p>
          <ProBadge variant="button" size="md" onClick={handleUpgrade} />
        </div>
      </div>
    </div>
  );
};

export default ProBadge;