"use client"
import { Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useGetNotifications } from "@/lib/react-query/hooks/reminders"
import { useRouter } from "next/navigation"

export function NotificationsPopover() {
  const router = useRouter()

  const { data: notifications } = useGetNotifications()

  const unreadCount = notifications?.filter(n => !n.read).length || 0

  const handleClick = () => {
    router.push("/dashboard/notifications")
  }

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={handleClick}
      className="relative h-10 w-10 rounded-full hover:bg-primary/10 transition-colors"
    >
      <Bell size={38} className="text-gray-600 hover:text-primary transition-colors" />
      {unreadCount > 0 && (
        <Badge
          variant="destructive"
          className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs bg-red-500 hover:bg-red-600"
        >
          {unreadCount > 9 ? "9+" : unreadCount}
        </Badge>
      )}
    </Button>
  )
}