"use client";

/**
 * AI Avatar Button
 * -----------------
 * A persistent floating button in the bottom-right corner that
 * opens the AI Strategist panel.
 *
 * Appears on all authenticated pages inside the app shell.
 */

import { Sparkles } from "lucide-react";

export function AiAvatarButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="fixed bottom-6 right-6 z-30 w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-600 to-violet-600 text-white shadow-lg shadow-brand-500/30 hover:shadow-xl hover:shadow-brand-500/40 hover:scale-105 active:scale-95 transition-all flex items-center justify-center group"
      title="Open AI Strategist"
    >
      <Sparkles className="w-6 h-6 group-hover:rotate-12 transition-transform" />

      {/* Pulse ring */}
      <span className="absolute inset-0 rounded-2xl bg-brand-400 animate-ping opacity-20 pointer-events-none" />

      {/* Label tooltip */}
      <span className="absolute right-full mr-3 px-3 py-1.5 bg-slate-900 text-white text-xs font-semibold rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
        AI Strategist
      </span>
    </button>
  );
}
