"use client";

import { useState } from "react";
import { MessageQuestion } from "iconsax-react";
import ChatbotWidget from "./ChatbotWidget";

export default function FloatingChatButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="fixed bottom-24 md:bottom-8 right-4 md:right-8 z-[9998] w-12 h-12 md:w-14 md:h-14 bg-primary hover:bg-primary/90 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center group animate-bounce-subtle hover:scale-110 active:scale-95"
        aria-label="باز کردن چت‌بات"
      >
        <MessageQuestion
          className="size-5 md:size-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300"
          color="#ffffff"
          variant="Bold"
        />
        {/* Pulse animation */}
        <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-20" />
        {/* Ripple effect */}
        <span className="absolute inset-0 rounded-full bg-primary/40 animate-pulse" />
      </button>

      <ChatbotWidget isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </>
  );
}
