import type { StreamStatus } from "../types";

interface Props {
  status: StreamStatus | null;
}

export default function StatusBar({ status }: Props) {
  if (!status) {
    return (
      <div className="status-bar">
        <span className="status-dot offline" />
        <span className="status-text">Connecting...</span>
      </div>
    );
  }

  return (
    <div className="status-bar">
      <span className={`status-dot ${status.live ? "live" : "offline"}`} />
      <span className="status-text">
        {status.live ? "LIVE" : "Offline"}
      </span>
      {status.channel_name && (
        <>
          <span className="status-separator">|</span>
          <span className={`status-channel ${status.transitioning ? "channel-transitioning" : ""}`}>
            {status.channel_name}
            {status.transitioning && (
              <span className="channel-switching">Switching...</span>
            )}
          </span>
        </>
      )}
      {status.upstream_down && (
        <>
          <span className="status-separator">|</span>
          <span className="upstream-down-banner">Upstream down?</span>
        </>
      )}
    </div>
  );
}