Voice Conversation

"use client";

import { useEffect, useState } from "react";
import {
  VoiceConversation,
  type VoiceConversationStatus,
} from "@/components/premium/voice-conversation";

export function VoiceConversationPreview() {
  const [status, setStatus] = useState<VoiceConversationStatus>("idle");
  const [muted, setMuted] = useState(false);
  const [level, setLevel] = useState(0);
  useEffect(() => {
    if (muted && status === "listening") return;
    const next: Partial<
      Record<VoiceConversationStatus, VoiceConversationStatus>
    > = {
      connecting: "listening",
      listening: "thinking",
      thinking: "speaking",
      speaking: "listening",
    };
    const target = next[status];
    if (!target) return;
    const timer = setTimeout(
      () => setStatus(target),
      status === "connecting" ? 900 : status === "thinking" ? 1600 : 5000,
    );
    return () => clearTimeout(timer);
  }, [status, muted]);
  useEffect(() => {
    if (status !== "speaking" && (status !== "listening" || muted)) {
      setLevel(0);
      return;
    }
    const started = performance.now();
    const timer = setInterval(() => {
      const time = (performance.now() - started) / 1000;
      setLevel(0.42 + Math.sin(time * 2.8) * 0.2 + Math.sin(time * 6.2) * 0.12);
    }, 50);
    return () => clearInterval(timer);
  }, [status, muted]);
  return (
    <div className="flex w-full flex-col items-center gap-4 p-4">
      <VoiceConversation
        status={status}
        muted={muted}
        level={level}
        onStart={() => {
          setMuted(false);
          setStatus("connecting");
        }}
        onEnd={() => setStatus("ended")}
        onMutedChange={setMuted}
        transcript={
          status === "listening"
            ? "“Help me turn this idea into a first draft.”"
            : status === "thinking"
              ? "Finding a good place to start…"
              : status === "speaking"
                ? "“Of course. What’s the one thing you want it to do?”"
                : undefined
        }
      />
      <p className="text-xs text-muted-foreground">
        Interactive demo · No microphone access
      </p>
    </div>
  );
}