import type { ComponentType } from "react";
import type { LucideProps } from "lucide-react";

interface GradientIconProps extends Omit<LucideProps, "color"> {
  icon: ComponentType<LucideProps>;
  /** Defaults to the primary brand gradient (green → cyan). */
  gradientId?: string;
}

/**
 * Renders any Lucide icon with its stroke set to a named SVG gradient.
 * Requires <BracktGradients /> to be mounted somewhere in the document.
 *
 * Usage:
 *   <GradientIcon icon={Shield} className="h-5 w-5" />
 *   <GradientIcon icon={Trophy} gradientId="brackt-primary-gradient" className="h-6 w-6" />
 */
export function GradientIcon({
  icon: Icon,
  gradientId = "brackt-primary-gradient",
  style,
  ...props
}: GradientIconProps) {
  return (
    <Icon
      {...props}
      style={{ stroke: `url(#${gradientId})`, ...style }}
    />
  );
}