import MultilineLoading from "@/app/component/loading/Multiline";
import TextLoading from "@/app/component/loading/Text";
import CalndarD from "@/components/icons/CalndarD";
import MessageNotifd from "@/components/icons/MessageNotifD";
import React from "react";

function Message({ data, loading, length, idx }) {
  return (
    <li>
      <div className="flex items-center justify-start gap-[8px]">
        <div className="p-[6px] rounded-full bg-[#F17732]">
          <MessageNotifd />
        </div>
        <TextLoading width={60} height={18} loading={loading}>
          <p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">
            عنوان پیام
          </p>
        </TextLoading>
      </div>
      <div className="mr-0 lg:mr-[41px]">
        <MultilineLoading width="full" height={18} loading={loading} line={2}>
          <p className="text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">
            {data.text}
          </p>
        </MultilineLoading>
        <div className="flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]">
          <div className="max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]">
            <CalndarD />
          </div>
          <TextLoading width={60} height={18} loading={loading}>
            <p className="text-[#7E7E7E] text-[12px] font-normal">
              {data.date}
            </p>
          </TextLoading>
        </div>
      </div>
      {length > idx + 1 && (
        <span className="block bg-[#EFEFEF] h-px w-full mt-[12px]"></span>
      )}
    </li>
  );
}

export default Message;