import { useEffect, useState } from "react";
import { Text } from "react-native";
import { useThemeStore } from "../stores/ThemeStore";
import { ChatBubble } from "./ChatBubble";

const DOTS = [".", "..", "..."];
const INTERVAL_MS = 400;

export default function TypingIndicator() {
  const { theme } = useThemeStore();
  const [dotIndex, setDotIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setDotIndex((prev) => (prev + 1) % DOTS.length);
    }, INTERVAL_MS);

    return () => clearInterval(interval);
  }, []);

  return (
    <ChatBubble side="left" className="px-4 py-2">
      <Text
        className="text-lg font-bold tracking-widest"
        style={{ color: theme.textMuted }}
      >
        {DOTS[dotIndex]}
      </Text>
    </ChatBubble>
  );
}
