import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle, faExclamationCircle, faTimesCircle, } from '@fortawesome/free-solid-svg-icons';
const BadgeWrapper = styled.span `
  height: fit-content;
  width: fit-content;
  position: relative;
  margin-right: 0.5rem;
  display: inline-block;
`;
const BadgeStyled = styled(FontAwesomeIcon) `
  ${(props) => {
    const theme = props.theme;
    return css `
      background: ${theme.backgroundLevel1};
      border-radius: 50%;
      color: ${theme.textSecondary};
      position: absolute;
      top: -25%;
      right: -35%;
      transform: scale(0.5);
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    `;
}}
`;
const getBadgeIcon = (status) => {
    switch (status) {
        case 'warning':
            return faExclamationCircle;
        case 'critical':
            return faTimesCircle;
        case 'unknown':
            return faQuestionCircle;
        case 'healthy':
        default:
            return null;
    }
};
function StatusWrapper({ status, children }) {
    const icon = getBadgeIcon(status);
    return (_jsxs(BadgeWrapper, { children: [children, icon !== null && _jsx(BadgeStyled, { icon: icon })] }));
}
export { StatusWrapper };
