import { Link2 } from "lucide-react";

interface LinkInjectionProps {
  value: string;
  onChange: (val: string) => void;
  disabled?: boolean;
}

export function LinkInjection({ value, onChange, disabled }: LinkInjectionProps) {
  return (
    <div className="group">
      <label className="block font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground mb-3 pl-1">
        Reference Injection (Optional)
      </label>
      
      <div className="flex items-center gap-4 border-b border-border group-focus-within:border-primary transition-colors pb-2">
        <Link2 className="w-5 h-5 text-muted-foreground group-focus-within:text-primary transition-colors" />
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
          placeholder="PASTE REFERENCE ARTIST OR CONTEXT..."
          className="flex-1 bg-transparent py-2 font-mono text-sm text-primary placeholder:text-muted/40 focus:outline-none disabled:opacity-50"
        />
      </div>
      
      <div className="mt-2 pl-1 h-4">
        {value && (
          <span className="font-mono text-[9px] text-green-600 tracking-widest uppercase animate-pulse">
            Data Stream Detected
          </span>
        )}
      </div>
    </div>
  );
}