import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BellOutlineMd } from '../../icons/BellOutlineMd';
import { IconButton } from '../IconButton';
import { NotificationList } from '../NotificationList';
import { useToggle } from '../useToggle';
import { dashboardLayoutNotificationListClassnames } from './constants';
import { StyledBadge, Wrapper } from './styles';
/**
 * Компонент для отображения уведомлений в хедере приложения
 */
export const DashboardLayoutNotificationList = ({ unreadNotifications, ...notificationListProps }) => {
    const [isOpen, handleOpen, handleClose] = useToggle();
    return (_jsxs(Wrapper, { className: dashboardLayoutNotificationListClassnames.root, children: [_jsx(IconButton, { variant: "text", color: "grey", onClick: handleOpen, className: dashboardLayoutNotificationListClassnames.button, children: _jsx(StyledBadge, { badgeContent: unreadNotifications?.length, color: "error", variant: "standard", children: _jsx(BellOutlineMd, {}) }) }), _jsx(NotificationList, { isOpen: isOpen, unreadNotifications: unreadNotifications, onClose: handleClose, ...notificationListProps })] }));
};
