import React, { ReactNode, ReactElement } from 'react';
import { StatusBadge, BadgeWrapper } from './StyledBadge';

export interface StatusProps {
  /*
   * The status badge's content.
   */
  children: ReactNode;
  /**
   * Visual intent color to apply to status badge.
   */
  intent?: 'basic' | 'success' | 'primary' | 'warning' | 'error' | 'danger';
}

const Status = ({ children, intent = 'danger' }: StatusProps): ReactElement => (
  <BadgeWrapper>
    {children}
    <StatusBadge themeIntent={intent} />
  </BadgeWrapper>
);

export default Status;