import { View, Image } from "@tarojs/components";
import ThinkAnimation from "../think-animation/index";
import style from "./index.module.less";
interface Props {
  loading?: boolean;
  analyzeStatus?: "idle" | "doing" | "done";
  content?: string;
  data?: {
    avatar: string;
    name: string;
    fileLen?: number;
  };
  children?: JSX.Element | JSX.Element[];
}
export default ({
  data,
  loading,
  content = '',
  analyzeStatus = "idle",
  children,
}: Props) => {
  return (
    <View className="flex gap-8 items-start">
      <View className={style.avatarContainer}>
        {data && <Image className={style.avatar} src={data?.avatar}></Image>}
      </View>
      <View className="flex flex-1 flex-col gap-8">
        <View className="font-medium text-14 leading-22">
          {data && data.name}
        </View>
        <View className="flex justify-start">
          <View className={`${style.message}  ${style.messageRobotRich}`}>
            <View className={style.messageContent}>
              {loading && <ThinkAnimation></ThinkAnimation>}
              {analyzeStatus !== "idle" && (
                <View className="flex items-center gap-6">
                  <View className="text-14 leading-28">
                    {analyzeStatus === "doing"
                      ? "正在为您解析"
                      : content}
                  </View>
                  {analyzeStatus === "doing" && (
                    <ThinkAnimation></ThinkAnimation>
                  )}
                </View>
              )}
              {children}
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};