/**
 * Speak text using the browser's speech synthesis API.
 * @param {string} text - The text to speak.
 * @param {string} [voice] - The name of the voice to use (optional).
 * @return {void}
 */
export function speak(text, voice = undefined) {
  const utter = new window.SpeechSynthesisUtterance(text);
  if (voice) {
    const voices = window.speechSynthesis.getVoices();
    const match = voices.find((v) => v.name === voice);
    if (match) utter.voice = match;
  }
  window.speechSynthesis.speak(utter);
}

export default (input, output) =>
  React.createElement(
    "div",
    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
    React.createElement(
      "div",
      { className: "flex items-center mb-2" },
      React.createElement(
        "div",
        {
          className:
            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
        },
        "🔊",
      ),
      React.createElement(
        "h3",
        { className: "text-blue-900 font-semibold" },
        "Speech Synthesis",
      ),
    ),
    React.createElement(
      "div",
      { className: "text-sm space-y-1" },
      React.createElement(
        "p",
        { className: "text-blue-700 font-medium" },
        `Speaking: "${input.text || "Unknown text"}"`,
      ),
      input.voice &&
        React.createElement(
          "p",
          { className: "text-blue-600 text-xs" },
          `Voice: ${input.voice}`,
        ),
      React.createElement(
        "p",
        { className: "text-blue-600 text-xs" },
        typeof output === "string" ? output : "Speech completed successfully",
      ),
    ),
  );