import React from 'react';
import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';

interface Props {
  status: VirtualLiveStatus;
}

const LABEL: Record<VirtualLiveStatus, string | null> = {
  idle: null,
  connecting: '연결 중',
  live: '실시간',
  disconnected: '연결 끊김',
};

const VirtualLiveBadge: React.FC<Props> = ({ status }) => {
  const label = LABEL[status];
  if (!label) return null;

  return (
    <span className={`vtd-live-badge vtd-live-badge--${status}`}>
      <span className="vtd-live-badge-dot" aria-hidden />
      <span className="vtd-live-badge-text">{label}</span>
    </span>
  );
};

export default VirtualLiveBadge;