import { View, ScrollView } from "@tarojs/components";

import { TAgentDetail } from "@/types/agent";

interface IProps {
  agent: TAgentDetail;
  enableOutputAudioStream: boolean;
  chatInputActions: {
    sendChatMessage: (message: string) => Promise<void>;
    setQuestions: (questions: string[]) => void;
    questions: string[];
  };
}

export default function Index({ agent, enableOutputAudioStream, chatInputActions }: IProps) {
  const { sendChatMessage, setQuestions, questions } = chatInputActions;

  const handleClick = (q: string) => {
    sendChatMessage(q);
    setQuestions([]);
  };

  if (!questions.length) {
    return <></>;
  }

  return (
    <ScrollView scrollX>
      <View className="flex items-center gap-8 pl-18">
        {questions.map((q, index) => {
          if (index < questions.length - 1) {
            return (
              <View
                onClick={() => handleClick(q)}
                className="px-12 py-4 text-[#777E95] leading-22 bg-white whitespace-nowrap rounded-10"
              >
                {q}
              </View>
            );
          }
          return (
            <View className="pr-18">
              <View
                onClick={() => handleClick(q)}
                className="px-12 py-4 text-[#777E95] leading-22 bg-white whitespace-nowrap rounded-10"
              >
                {q}
              </View>
            </View>
          );
        })}
      </View>
    </ScrollView>
  );
}
