import React from "react";
import { Bell } from "lucide-react";
import { useNotifications } from "@/shared/hooks/useNotification";

export const NotificationBell = () => {
  const { unseenCount } = useNotifications({ take: 1, skip: 0, orderBy: "createdAt:DESC" });

  return (
    <div className="relative cursor-pointer">
      <Bell className="w-6 h-6" />
      {unseenCount > 0 && (
        <span className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs px-1">
          {unseenCount > 99 ? "99+" : unseenCount}
        </span>
      )}
    </div>
  );
};
