import { RigoLoader } from "./RigoLoader"

import { SVGS } from "../assets/svgs"
import useStore from "../utils/store"
import { MarkdownRenderer } from "./MarkdownRenderer"
import { useTranslation } from "react-i18next"

export type TMessage = {
  type: "user" | "assistant"
  content: string
}

export const Message: React.FC<TMessage> = ({ type, content }) => {
  const { t } = useTranslation()
  const user = useStore((state) => state.auth.user)
  const isAI = type === "assistant"

  const isLoading = isAI && !content

  return isLoading ? (
    <RigoLoader
      text={t("loader.thinking")}
      svg={<img src="rigo-float.gif" />}
    />
  ) : (
    <div
      className={`flex items-start space-x-2 p-3 rounded-md border ${
        isAI
          ? "bg-gray-50 border-gray-300 text-gray-800"
          : "bg-blue-50 border-blue-200 text-blue-900"
      }`}
    >
      {isAI ? (
        <span className="mt-1">{SVGS.rigoSoftBlue}</span>
      ) : user?.profile?.avatar_url ? (
        <img src={user?.profile?.avatar_url} className="w-6 h-6 rounded-full" />
      ) : (
        <span className="mt-1">{SVGS.user}</span>
      )}
      <div className="w-full  break-words overflow-x-auto ">
        <MarkdownRenderer content={content} />
      </div>
    </div>
  )
}
