'use client';

import './Message.css';
import { cn } from '@/lib';

interface UserMessageProps {
  item: any;
  isLast: boolean;
}
const UserMessage = ({ item, isLast }: UserMessageProps) => {
  return (
    <div className={cn('flex w-full justify-end pt-7', isLast && 'pb-7')}>
      <div className="max-w-[80%] rounded-xl bg-[rgba(15,15,25,0.8)] px-5 py-3.5">
        {item.content}
      </div>
    </div>
  );
};

interface AssistantMessageProps {
  item: any;
  isLast: boolean;
}

const AssistantMessage = ({ item, isLast }: AssistantMessageProps) => {
  return (
    <div className={cn('w-full pt-7', isLast && 'pb-7')}>
      <div
        style={{
          borderImageSource: 'url(/bubble/default.png)',
        }}
        className="chat-message-bubble max-w-[80%]"
      >
        {item.content}
      </div>
    </div>
  );
};

interface MessageProps {
  item: any;
  index: number;
  isLast: boolean;
}

export default function Message({ item, index, isLast }: MessageProps) {
  if (item.sender === 'user') {
    return <UserMessage item={item} isLast={isLast} />;
  } else {
    return <AssistantMessage item={item} isLast={isLast} />;
  }
}
