interface VoiceStatusProps {
  text: string;
  visible: boolean;
}

function TextBubbleIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M6 7.5h12a2.5 2.5 0 0 1 2.5 2.5v5A2.5 2.5 0 0 1 18 17.5H11l-4.5 3v-3H6A2.5 2.5 0 0 1 3.5 15v-5A2.5 2.5 0 0 1 6 7.5Z"
        fill="currentColor"
      />
      <path d="M8 11h8" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
      <path d="M8 14h5" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
    </svg>
  );
}

export function VoiceStatus({ text, visible }: VoiceStatusProps) {
  return (
    <div id="voiceStatus" class={visible ? "visible" : ""}>
      {text}
    </div>
  );
}

interface ControlBarProps {
  textOnly: boolean;
  onToggleTextOnly(enabled: boolean): void;
}

export function ControlBar({ textOnly, onToggleTextOnly }: ControlBarProps) {
  const voiceActive = !textOnly;
  const toggleLabel = voiceActive ? "Exit voice mode" : "Open voice mode";

  return (
    <div id="controls">
      <div class="control-group">
        {voiceActive ? (
          <button
            id="voiceModeBtn"
            class="control-mode-btn active"
            type="button"
            aria-pressed={voiceActive}
            aria-label={toggleLabel}
            title={toggleLabel}
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              onToggleTextOnly(!textOnly);
            }}
          >
            <span class="control-mode-btn-icon" aria-hidden="true">
              <TextBubbleIcon />
            </span>
          </button>
        ) : null}
      </div>
    </div>
  );
}
