"use client";

import Box from "@mui/material/Box";

import { useSystemNotifications } from "@/features/system-notifications/use-system-notifications";

export function SidebarNotificationBadge() {
    const { unreadCount } = useSystemNotifications();

    if (unreadCount <= 0) return null;

    return (
        <Box
            component="span"
            sx={{
                minWidth: 24,
                height: 24,
                px: 0.75,
                borderRadius: "999px",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                bgcolor: "#FFF1F0",
                color: "#FF3B30",
                fontSize: 12,
                fontWeight: 600,
                lineHeight: 1,
                flexShrink: 0,
            }}
        >
            {unreadCount > 99 ? "99+" : unreadCount}
        </Box>
    );
}