import React from "react";
import styled from "styled-components";
import { NotificationIcon } from "../../../asorted";
import Text from "../../../asorted/Text";
import { Grid, Flex } from "../..";
export default function NotificationCard({ title, cta, icon, description, isHighlighted, onClick, ...boxProps }) {
    const handleCTAClick = event => {
        event.stopPropagation();
        onClick(event);
    };
    return (React.createElement(Wrapper, { ...boxProps, isHighlighted: isHighlighted, onClick: handleCTAClick },
        React.createElement(NotificationIcon, { icon: icon, variant: isHighlighted ? "square" : "round" }),
        React.createElement(Flex, { flexDirection: "column", rowGap: isHighlighted ? "4px" : "8px" },
            title && (React.createElement(Text, { variant: "h4Inter", fontSize: 16 }, title)),
            description && (React.createElement(Desc, { color: isHighlighted ? "neutral.c100" : "neutral.c80" }, description)),
            cta)));
}
const Desc = styled(Text).attrs({ variant: "small" }) `
  font-family: Inter;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
`;
const Wrapper = styled(Grid) `
  background-color: ${({ isHighlighted, theme: { colors } }) => {
    if (!isHighlighted)
        return "transparent";
    return colors.type === "dark" ? colors.opacityDefault.c05 : colors.neutral.c00;
}};

  cursor: pointer;
  padding: 12px;
  grid-template-columns: auto 1fr;
  gap: ${p => (p.isHighlighted ? "12px" : "24px")};
  border-radius: 12px;

  align-items: center;
  justify-content: start;
`;
//# sourceMappingURL=index.js.map