import { MessageCircleIcon, XIcon } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import ChatbotPanel from "./ChatbotPanel";

const ChatbotWidget = ({ className }: { className?: string }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {isOpen && (
        <div
          className={cn(
            "fixed right-4 top-4 bottom-4 z-50",
            "w-[min(420px,calc(100vw-2rem))]",
            className,
          )}
        >
          <ChatbotPanel variant="widget" onClose={() => setIsOpen(false)} />
        </div>
      )}
      <button
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        className={cn(
          "fixed bottom-4 right-4 z-50 size-12 rounded-full shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl",
          isOpen
            ? "bg-secondary text-secondary-foreground"
            : "bg-primary text-primary-foreground",
        )}
        aria-label={isOpen ? "Close chat" : "Open chat"}
      >
        {isOpen ? <XIcon className="mx-auto size-5" /> : <MessageCircleIcon className="mx-auto size-5" />}
      </button>
    </>
  );
};

export default ChatbotWidget;
