import Style from "@/styles/modules/chat.module.css";
import type { ChatMessage } from "@/types/chat";
import { formatChatTime } from "@/utils/chatHelpers";

const Sender = ({
  data,
  onAttachmentLoad,
}: {
  data: ChatMessage;
  onAttachmentLoad?: () => void;
}) => {
  const { createdAt, content, attachments, isDeleted } = data;

  if (isDeleted) {
    return (
      <div className={Style.sender}>
        <div className={Style.messages}>
          <div className={`${Style.msg} ${Style.deletedMsg}`}>
            <p>This message was deleted</p>
            <div className={Style.msgFooter}>
              <span className={Style.msgTime}>{formatChatTime(createdAt)}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={Style.sender}>
      <div className={Style.messages}>
        <div className={Style.msg}>
          {attachments?.map((att, i) =>
            att.type === "image" ? (
              <a key={i} href={att.url} target="_blank" rel="noreferrer">
                <img
                  src={att.url}
                  alt={att.fileName || "attachment"}
                  className={Style.attachmentImage}
                  onLoad={onAttachmentLoad}
                />
              </a>
            ) : att.type === "video" ? (
              <video
                key={i}
                src={att.url}
                controls
                className={Style.attachmentImage}
                onLoadedData={onAttachmentLoad}
              />
            ) : (
              <a
                key={i}
                href={att.url}
                target="_blank"
                rel="noreferrer"
                className={Style.fileLink}
              >
                📎 {att.fileName || "Download file"}
              </a>
            )
          )}
          {content?.trim() ? <p className={Style.msgText}>{content}</p> : null}
          <div className={Style.msgFooter}>
            <span className={Style.msgTime}>{formatChatTime(createdAt)}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sender;