"use client";

import { useEffect, useState } from "react";
import { isVoiceAutoplayEnabled, setVoiceAutoplayEnabled } from "../../lib/voice-autoplay-settings";

// T26：多人房內角色新發言的自動語音播放開關；關閉後回到只能逐則點擊播放（見 VoicePlaybackButton）。
export function VoiceAutoplaySection() {
  const [enabled, setEnabled] = useState(true);

  useEffect(() => {
    setEnabled(isVoiceAutoplayEnabled());
  }, []);

  function handleToggle(next: boolean) {
    setVoiceAutoplayEnabled(next);
    setEnabled(next);
  }

  return (
    <section className="flex flex-col gap-3 rounded-2xl border p-4" style={{ borderColor: "var(--line)" }}>
      <h2 className="text-sm font-bold" style={{ color: "var(--ink)" }}>
        自走語音自動播放
      </h2>
      <p className="text-xs" style={{ color: "var(--ink-soft)" }}>
        開啟後，在房間畫面時角色的新發言會自動依序念出來；關閉則回到逐則點擊才播放。
      </p>
      <label className="flex items-center gap-2 text-sm" style={{ color: "var(--ink)" }}>
        <input type="checkbox" checked={enabled} onChange={(event) => handleToggle(event.target.checked)} />
        在房間時自動播放角色語音
      </label>
    </section>
  );
}