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

interface ProBadgeProps {
  variant?: 'inline' | 'block' | 'icon-only';
  size?: 'sm' | 'md' | 'lg';
  showIcon?: boolean;
  showLock?: boolean;
  tooltip?: string;
  className?: string;
}

/**
 * Professional PRO Badge Component
 * 
 * Használat:
 * - <ProBadge variant="inline" /> - Inline badge szöveg mellé
 * - <ProBadge variant="block" /> - Külön blokkként
 * - <ProBadge variant="icon-only" showLock /> - Csak lock ikon
 */
export default function ProBadge({
  variant = 'inline',
  size = 'sm',
  showIcon = true,
  showLock = false,
  tooltip,
  className = '',
}: ProBadgeProps) {
  const { t } = useTranslation();
  const defaultTooltip = tooltip || t('pro_badge.tooltip');
  
  const sizeClasses = {
    sm: 'text-xs px-1.5 py-0.5 gap-1',
    md: 'text-sm px-2 py-1 gap-1.5',
    lg: 'text-base px-3 py-1.5 gap-2',
  };
  
  const iconSize = {
    sm: 12,
    md: 14,
    lg: 16,
  };
  
  // Icon-only variant
  if (variant === 'icon-only') {
    const Icon = showLock ? Lock : Crown;
    return (
      <span 
        className={`inline-flex items-center justify-center text-amber-600 ${className}`}
        title={tooltip || 'PRO funkció'}
        aria-label="PRO funkció"
      >
        <Icon size={iconSize[size]} className="shrink-0" />
      </span>
    );
  }
  
  // Block variant (full width card-style)
  if (variant === 'block') {
    return (
      <div 
        className={`
          inline-flex items-center justify-center
          bg-gradient-to-r from-amber-50 to-yellow-50
          border-2 border-amber-300
          rounded-lg shadow-sm
          font-semibold text-amber-700
          ${sizeClasses[size]}
          ${className}
        `}
        title={defaultTooltip}
        aria-label={t('pro_badge.aria_label')}
      >
        {showIcon && <Crown size={iconSize[size]} className="shrink-0" />}
        <span>PRO</span>
      </div>
    );
  }
  
  // Inline variant (compact badge)
  return (
    <span 
      className={`
        inline-flex items-center
        bg-gradient-to-r from-amber-400 to-yellow-400
        text-white
        font-bold tracking-wide
        rounded-md
        shadow-sm
        uppercase
        ${sizeClasses[size]}
        ${className}
      `}
      title={defaultTooltip}
      aria-label={t('pro_badge.aria_label')}
    >
      {showIcon && <Crown size={iconSize[size]} className="shrink-0" fill="white" />}
      <span>PRO</span>
    </span>
  );
}