import React from 'react';
import { Badge } from 'react-bootstrap';

import '../../styles/ProtocolBriefing.scss';

export interface StatusPillProps {
  label: string;
  value: string;
  tone: 'success' | 'warning' | 'danger' | 'secondary';
}

export const StatusPill: React.FC<StatusPillProps> = ({ label, value, tone }) => {
  return (
    <div className="protocol-briefing-signal-pill">
      <span>{label}</span>
      <Badge bg={tone}>{value}</Badge>
    </div>
  );
};