import Voice from '@react-native-voice/voice';
import Animated from 'react-native-reanimated';

const VoiceInput = ({ onResult }) => {
  const [recording, setRecording] = useState(false);
  const scale = useSharedValue(1);

  const start = async () => {
    setRecording(true);
    scale.value = withRepeat(withTiming(1.8, { duration: 800 }), -1, true);
    await Voice.start('en-US');
  };

  Voice.onSpeechResults = (e) => {
    onResult(e.value[0]);
    setRecording(false);
  };

  return (
    <TouchableOpacity onPress={recording ? Voice.stop : start}
      style={[styles.mic, recording && styles.micActive]}>
      <MicIcon size={32} color={recording ? '#fff' : '#7a5af8'} />
    </TouchableOpacity>
  );
};

const StreamingMessage = ({ text, isStreaming }) => {
  return (
    <View style={styles.bubble}>
      <Text style={styles.text}>{text}</Text>
      {isStreaming && <BlinkingCursor />}
    </View>
  );
};

const BlinkingCursor = () => {
  const opacity = useSharedValue(1);
  useEffect(() => {
    opacity.value = withRepeat(
      withTiming(0, { duration: 400 }), -1, true
    );
  }, []);
  return <Animated.View style={[styles.cursor, { opacity }]} />;
};