'use client';

import React from 'react';
import AITextRender from '@/components/ui/text-md';

const Loading = () => {
  return (
    <div className="flex justify-start">
      <div className="flex items-center gap-1">
        <div className="bg-txt-secondary-normal h-2 w-2 animate-bounce rounded-full [animation-delay:-0.3s]"></div>
        <div className="bg-txt-secondary-normal h-2 w-2 animate-bounce rounded-full [animation-delay:-0.15s]"></div>
        <div className="bg-txt-secondary-normal h-2 w-2 animate-bounce rounded-full"></div>
      </div>
    </div>
  );
};

function AIMessage({ data }: { data: any }) {
  return (
    <div className="mb-8 max-w-[90%]">
      <div className="bg-surface-element-normal inline-block rounded-lg p-4 backdrop-blur-2xl">
        {data.content ? <AITextRender text={data.content} /> : <Loading />}
      </div>
    </div>
  );
}
export default React.memo(AIMessage);
