import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { fontSize, fontWeight } from '../../style/theme';
import { getThemeVariantSelector, getVariantThemeKey } from '../../utils';
import { Icon } from '../icon/Icon.component';
const BANNER_ICON_SIZE = 'lg';
const DEFAULT_ICON_BY_VARIANT = {
    base: 'Info-circle',
    selected: 'Exclamation-circle',
    healthy: 'Exclamation-circle',
    warning: 'Exclamation-circle',
    danger: 'Exclamation-circle',
};
const BannerContainer = styled.div `
  ${(props) => css `
    color: ${props.theme.textPrimary};
    background-color: ${props.theme.backgroundLevel1};
    display: flex;
    padding: ${spacing.r8};
    align-items: center;
    font-size: ${fontSize.small};
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 3px;
    border-color: ${getThemeVariantSelector()};
  `}
`;
const BannerIconContainerStyled = styled.div `
  ${(props) => css `
    display: flex;
    align-items: center;
    margin-left: ${spacing.r8};
    color: ${getThemeVariantSelector()};
  `}
`;
function BannerIconContainer({ variant, children, }) {
    if (children == null)
        return null;
    return (_jsx(BannerIconContainerStyled, { variant: variant, children: children }));
}
const TextContainer = styled.div `
  display: flex;
  flex-direction: column;
`;
const Text = styled.span `
  margin-left: ${spacing.r16};
`;
const Title = styled.div `
  margin-left: ${spacing.r16};
  font-weight: ${fontWeight.bold};
`;
function Banner({ withDefaultIcon = false, icon, title, children, variant, ...rest }) {
    const iconContent = icon !== undefined
        ? icon
        : withDefaultIcon
            ? (_jsx(Icon, { name: DEFAULT_ICON_BY_VARIANT[variant], size: BANNER_ICON_SIZE, color: getVariantThemeKey(variant) }))
            : null;
    return (_jsxs(BannerContainer, { variant: variant, children: [_jsx(BannerIconContainer, { variant: variant, children: iconContent }), _jsxs(TextContainer, { children: [title && _jsx(Title, { children: title }), _jsx(Text, { children: children })] })] }));
}
export { Banner };
