import React, { Fragment, useCallback } from "react";
import { useToggle } from "react-use";
import { Layer, Flex } from "@netdata/netdata-ui";
import Header from "./header";
import Item from "./item";
import { Container } from "./container";
const News = ({ children, items = [], onCloseClick }) => {
    const [isOpen, toggle] = useToggle();
    const onClose = useCallback(() => {
        toggle();
        if (onCloseClick)
            onCloseClick();
    }, [toggle, onCloseClick]);
    return (React.createElement(Fragment, null,
        children(toggle, isOpen),
        isOpen && (React.createElement(Layer, { backdrop: true, onClickOutside: onClose, onEsc: onClose },
            React.createElement(Flex, { background: "mainBackground", round: true, padding: [6], width: "640px", height: { max: "640px" }, gap: 4, column: true },
                React.createElement(Header, { onClose: onClose }),
                React.createElement(Container, { column: true, gap: 6 }, items.map(item => (React.createElement(Item, { key: item.id, item: item })))))))));
};
export default News;
//# sourceMappingURL=index.js.map