import { jsx, jsxs } from "react/jsx-runtime";
/* empty css                  */
import Skeleton from "../../../../node_modules/@mui/material/Skeleton/Skeleton.js";
const ChatMessageListSkeleton = ({ className, messageCount = 8 }) => {
  const renderSkeletonMessages = () => {
    const messages = [];
    for (let i = 0; i < messageCount; i++) {
      const isOwnMessage = i % 3 === 0;
      const hasDateSeparator = i % 4 === 0;
      if (hasDateSeparator) {
        messages.push(
          /* @__PURE__ */ jsx("div", { className: "date-separator-skeleton", children: /* @__PURE__ */ jsx(Skeleton, { className: "date-skeleton", height: 16, variant: "text", width: 80 }) }, `date-${i}`)
        );
      }
      messages.push(
        /* @__PURE__ */ jsxs("div", { className: `message-skeleton ${isOwnMessage ? "own-message" : ""}`, children: [
          !isOwnMessage && /* @__PURE__ */ jsx(
            Skeleton,
            {
              className: "message-avatar-skeleton",
              height: 32,
              variant: "circular",
              width: 32
            }
          ),
          /* @__PURE__ */ jsxs("div", { className: "message-content-skeleton", children: [
            !isOwnMessage && /* @__PURE__ */ jsx(Skeleton, { className: "sender-skeleton", height: 16, variant: "text", width: 100 }),
            /* @__PURE__ */ jsx(
              Skeleton,
              {
                className: "text-skeleton",
                height: 20,
                variant: "text",
                width: isOwnMessage ? 200 : 180
              }
            ),
            /* @__PURE__ */ jsx(
              Skeleton,
              {
                className: "text-skeleton",
                height: 20,
                variant: "text",
                width: isOwnMessage ? 160 : 220
              }
            ),
            /* @__PURE__ */ jsxs("div", { className: "message-meta-skeleton", children: [
              /* @__PURE__ */ jsx(Skeleton, { className: "time-skeleton", height: 14, variant: "text", width: 60 }),
              isOwnMessage && /* @__PURE__ */ jsx(Skeleton, { className: "status-skeleton", height: 16, variant: "circular", width: 16 })
            ] })
          ] })
        ] }, `msg-${i}`)
      );
    }
    return messages;
  };
  return /* @__PURE__ */ jsx("div", { className: `chat-message-list-skeleton ${className}`, children: renderSkeletonMessages() });
};
export {
  ChatMessageListSkeleton as default
};
