/**
 * Pro Indicator Component
 *
 * A small Crown icon in brand color with a "Pro" tooltip on hover.
 * Used next to Pro-only tabs, settings, and features so Pro users
 * can easily see which features they've unlocked.
 *
 * Usage:
 *   <ProIndicator />
 *   <ProIndicator size="sm" />
 *   <ProIndicator size="lg" className="ml-1" />
 */

import { Crown } from "lucide-react"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"

interface ProIndicatorProps {
  /** Size variant: sm (12px), md (14px, default), lg (16px) */
  size?: "sm" | "md" | "lg"
  /** Additional CSS classes */
  className?: string
}

const sizeMap = {
  sm: "h-3 w-3",
  md: "h-3.5 w-3.5",
  lg: "h-4 w-4",
}

export function ProIndicator({ size = "md", className }: ProIndicatorProps) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <span className={cn("inline-flex items-center shrink-0", className)}>
          <Crown
            className={cn(sizeMap[size])}
            style={{ color: '#002269' }}
          />
        </span>
      </TooltipTrigger>
      <TooltipContent side="top" className="text-xs">
        Pro
      </TooltipContent>
    </Tooltip>
  )
}