"use client";

import { MessageSquare } from "lucide-react";
import { useMessengerContext } from "@/contexts/MessengerContext";

export function MessengerFAB() {
  const { isOpen, openMessenger, unreadCount } = useMessengerContext();

  if (isOpen) return null;

  return (
    <button
      onClick={() => openMessenger()}
      className="fixed bottom-6 right-6 z-[9999] flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors"
      aria-label="메신저 열기"
    >
      <MessageSquare className="h-6 w-6" />
      {unreadCount > 0 && (
        <span className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[11px] font-bold text-destructive-foreground">
          {unreadCount > 99 ? "99+" : unreadCount}
        </span>
      )}
    </button>
  );
}
