import { Badge } from "@/components/ui/badge"
import { useNotificationCount } from "@/hooks/use-notification-count"

interface NotificationBadgeProps {
  className?: string
  showZero?: boolean
}

export function NotificationBadge({ className, showZero = false }: NotificationBadgeProps) {
  const { unreadCount, isLoading } = useNotificationCount()

  if (isLoading) {
    return null
  }

  if (unreadCount === 0 && !showZero) {
    return null
  }

  return <Badge className={`bg-primary text-primary-foreground border-0 ${className}`}>{unreadCount}</Badge>
}

export function NotificationDot() {
  const { unreadCount, isLoading } = useNotificationCount()

  if (isLoading || unreadCount === 0) {
    return null
  }

  return (
    <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
      {unreadCount > 9 ? "9+" : unreadCount}
    </span>
  )
}
