import * as React from 'react';
import { cn } from '@/lib/utils';
import { Crown } from 'lucide-react';

interface ProBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Size of the badge */
  size?: 'sm' | 'md' | 'lg';
  /** Show crown icon */
  showIcon?: boolean;
  /** Badge text (default: "PRO") */
  text?: string;
}

/**
 * ProBadge - Shows "PRO" badge for Pro-only features
 * 
 * Usage:
 * - Add next to Pro-only field types in picker
 * - Add next to Pro-only menu items
 * - Add next to Pro-only settings
 * 
 * When Pro is active, this component should NOT be rendered.
 * Use with ProFeatureGate or conditional rendering based on isPro.
 */
const ProBadge = React.forwardRef<HTMLSpanElement, ProBadgeProps>(
  ({ className, size = 'sm', showIcon = false, text = 'PRO', ...props }, ref) => {
    const sizeClasses = {
      sm: 'rdcfe-px-1.5 rdcfe-py-0.5 rdcfe-text-[10px]',
      md: 'rdcfe-px-2 rdcfe-py-0.5 rdcfe-text-xs',
      lg: 'rdcfe-px-2.5 rdcfe-py-1 rdcfe-text-sm',
    };

    const iconSizes = {
      sm: 'rdcfe-h-2.5 rdcfe-w-2.5',
      md: 'rdcfe-h-3 rdcfe-w-3',
      lg: 'rdcfe-h-3.5 rdcfe-w-3.5',
    };

    return (
      <span
        ref={ref}
        className={cn(
          'rdcfe-inline-flex rdcfe-items-center rdcfe-gap-1 rdcfe-rounded-full rdcfe-font-bold rdcfe-uppercase rdcfe-tracking-wide',
          'rdcfe-bg-gradient-to-r rdcfe-from-amber-500 rdcfe-to-orange-500 rdcfe-text-white',
          'rdcfe-shadow-sm rdcfe-select-none',
          sizeClasses[size],
          className
        )}
        {...props}
      >
        {showIcon && <Crown className={iconSizes[size]} />}
        {text}
      </span>
    );
  }
);
ProBadge.displayName = 'ProBadge';

/**
 * ProTag - Smaller inline tag for settings/options
 */
const ProTag = React.forwardRef<HTMLSpanElement, Omit<ProBadgeProps, 'size'>>(
  ({ className, ...props }, ref) => (
    <ProBadge
      ref={ref}
      size="sm"
      className={cn('rdcfe-ml-1.5 rdcfe-align-middle', className)}
      {...props}
    />
  )
);
ProTag.displayName = 'ProTag';

export { ProBadge, ProTag };