{"size": 1467, "ext": "js", "max_stars_repo_path": "src/lib/components/statuswrapper/Statuswrapper.component.js", "max_stars_repo_name": "scality/core-ui", "max_stars_repo_stars_event_min_datetime": "2019-03-04T10:50:12.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-08T09:43:49.000Z", "max_issues_repo_path": "src/lib/components/statuswrapper/Statuswrapper.component.js", "max_issues_repo_name": "scality/core-ui", "max_issues_repo_issues_event_min_datetime": "2019-04-18T20:15:41.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T20:31:46.000Z", "max_forks_repo_path": "src/lib/components/statuswrapper/Statuswrapper.component.js", "max_forks_repo_name": "scality/core-ui", "max_forks_repo_forks_event_min_datetime": "2019-10-01T23:25:47.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-18T10:38:33.000Z"}
{"max_stars_count": 16, "max_issues_count": 381, "max_forks_count": 6, "avg_line_length": 21.5735294118, "max_line_length": 65, "alphanum_fraction": 0.6353101568}
// @flow
import * as React from 'react';
import styled, { css } from 'styled-components';
import { getTheme } from '../../utils';
import type { Status } from '../constants';
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 = getTheme(props);
    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;
  }
};

type Props = {
  status: Status,
  children: React.Node,
};

function StatusWrapper({ status, children }: Props) {
  const icon = getBadgeIcon(status);

  return (
    <BadgeWrapper>
      {children}
      {icon !== null && <BadgeStyled icon={icon} />}
    </BadgeWrapper>
  );
}

export default StatusWrapper;
