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

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

interface ControlBarProps {
  onReset(): void;
}

export function ControlBar({ onReset }: ControlBarProps) {
  return (
    <div id="controls">
      <button
        id="resetSessionBtn"
        class="control-btn"
        type="button"
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          onReset();
        }}
      >
        Reset
      </button>
    </div>
  );
}