import React from "react";
import styled from "styled-components";
import FlexBox from "../../layout/Flex";
import Text from "../../asorted/Text";
import Badge from "./Badge";
import Link from "../../cta/Link";
import { ExternalLinkMedium } from "@ledgerhq/icons-ui/reactLegacy";
const Container = styled(FlexBox).attrs({
    p: 6,
    columnGap: 8,
    alignItems: "center",
}) `
  --notification-badge-border: ${p => {
    /* Set a CSS variable that will be consumed by the Badge component */
    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;
}};
  background-color: ${p => (p.hasBackground ? p.theme.colors.neutral.c30 : "transparent")};

  border-radius: 8px;
`;
function Notification({ title, description, badge, link, onLinkClick, hasBackground = false, ...containerProps }) {
    return (React.createElement(Container, { hasBackground: hasBackground, ...containerProps },
        badge,
        React.createElement(FlexBox, { flexDirection: "column", rowGap: 3, flex: "auto" },
            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title),
            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description)),
            link && (React.createElement(FlexBox, { justifyContent: "flex-start" },
                React.createElement(Link, { onClick: event => onLinkClick && onLinkClick(event), Icon: ExternalLinkMedium }, link))))));
}
Notification.Badge = Badge;
export default Notification;
//# sourceMappingURL=index.js.map