"use client";

import { ExtendedMessage } from "@/atoms/im";
import ChatImageContainer from "./ChatImageContainer";
import { useContainerWidth } from "@/hooks/useContainerWidth";
import ChatUserTextContainer from "../../ChatUserTextContainer";

const ChatCustomImageItem = ({
  message,
  customData,
  isUser,
}: {
  message: ExtendedMessage;
  customData: {
    type: string;
    url: string;
    width: number;
    height: number;
  };
  isUser: boolean;
}) => {
  const { width: containerWidth, containerRef } = useContainerWidth();

  if (isUser) {
    return (
      <>
        <div ref={containerRef} className="flex justify-end items-center pb-8">
          <ChatImageContainer
            url={customData.url}
            width={Number(customData.width)}
            height={Number(customData.height)}
            containerWidth={containerWidth}
          />
        </div>
        <ChatUserTextContainer message={message} />
      </>
    );
  }

  return (
    <>
      <div ref={containerRef} className="flex justify-start">
        <ChatImageContainer
          url={customData.url}
          width={Number(customData.width)}
          height={Number(customData.height)}
          containerWidth={containerWidth}
        />
      </div>
      <div className="h-8" />
    </>
  );
}
 
export default ChatCustomImageItem;