import { LucideIcon } from "lucide-react";
import { Badge } from "../ui/badge";
import { cn } from "../ui/utils";

interface IconWithBadgeProps {
  icon: LucideIcon;
  iconColor?: string;
  iconBgColor?: string;
  label?: string;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
    className?: string;
  };
  size?: "sm" | "md" | "lg";
}

export const IconWithBadge = ({
  icon: Icon,
  iconColor = "text-blue-600",
  iconBgColor = "bg-blue-100",
  label,
  badge,
  size = "md"
}: IconWithBadgeProps) => {
  const sizeClasses = {
    sm: { container: "w-6 h-6", icon: "w-3 h-3" },
    md: { container: "w-8 h-8", icon: "w-4 h-4" },
    lg: { container: "w-10 h-10", icon: "w-5 h-5" }
  };

  return (
    <div className="flex items-center gap-2">
      <div className={cn(
        "rounded-lg flex items-center justify-center",
        iconBgColor,
        sizeClasses[size].container
      )}>
        <Icon className={cn(iconColor, sizeClasses[size].icon)} />
      </div>
      {label && <span className="font-medium">{label}</span>}
      {badge && (
        <Badge variant={badge.variant} className={badge.className}>
          {badge.label}
        </Badge>
      )}
    </div>
  );
};
