import Image from "next/image";
import { User } from "@/types/types";
import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
import BoldIcon from "@/components/ui/BoldIcon";

interface Message {
  _id: string;
  text: string;
  senderId: string;
  createdAt: string;
  file: string;
  status: 'sent' | 'delivered' | 'seen';
}

interface MessageCardProps {
  message: Message;
  userDetail: User | undefined;
}

const MessageCard = ({ message, userDetail }: MessageCardProps) => {
  const isSender = userDetail && message.senderId === userDetail._id;

  const renderStatus = () => {
    if (!isSender) return null;

    switch (message.status) {
      case 'sent':
        return <BoldIcon name="tick-circle" size={14} tinted className="text-gray-400" />;
      case 'delivered':
        return (
          <div className="flex -space-x-2">
            <BoldIcon name="tick-circle" size={14} tinted className="text-gray-400" />
            <BoldIcon name="tick-circle" size={14} tinted className="text-gray-400" />
          </div>
        );
      case 'seen':
        return (
          <div className="flex -space-x-2 text-[#2196EB]">
            <BoldIcon name="tick-circle" size={14} tinted className="text-[#2196EB]" />
            <BoldIcon name="tick-circle" size={14} tinted className="text-[#2196EB]" />
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className={`my-8 flex justify-between w-full items-end ${isSender ? "flex-row-reverse" : ""}`}>
      <span className={`${isSender ? "text-[#2196EB]" : "text-[#E56D29]"}`}>{message.createdAt}</span>
      
      <div className="flex flex-col items-end gap-1">
        {message.file ? (
          <div className="rounded-md overflow-hidden">
            <Image width={100} height={100} alt="message" src={IMAGE_BASE_URL + message.file} />
          </div>
        ) : (
          <div className={`border rounded-full p-4 ${isSender ? "border-[#2196EB]" : "border-[#E56D29]"}`}>
            {message.text}
          </div>
        )}
        
        <div className="px-1">{renderStatus()}</div>
      </div>
    </div>
  );
};

export default MessageCard;
