import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { useTheme } from 'styled-components';
import { Stack } from '../../spacing';
import { Icon } from '../icon/Icon.component';
import { Link, Text } from '../text/Text.component';
import { useComputeBackgroundColor } from './InfoMessageUtils';
const InfoMessageContainer = styled.div `
  background-color: ${(props) => props.theme.backgroundLevel2};
  border-radius: 3px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: white;
`;
export const InfoMessage = ({ title, content, link }) => {
    const { containerRef, backgroundColor } = useComputeBackgroundColor();
    const theme = useTheme();
    return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: ["More info ", _jsx(Icon, { name: "External-link" })] }))] }));
};
