import React, { FC } from 'react';
import { cx } from '@emotion/css';

interface Props {
  status: 'critical' | 'warning' | 'online' | 'ok' | 'problem';
  className?: string;
}

export const GFHeartIcon: FC<Props> = ({ status, className }) => {
  const iconClass = cx(
    className,
    'icon-gf',
    { "icon-gf-critical": status === 'critical' || status === 'problem' || status === 'warning'},
    { "icon-gf-online": status === 'online' || status === 'ok' },
  );

  return (
    <i className={iconClass}></i>
  );
};

export default GFHeartIcon;
