// components/chat/skeletons/ChatMessageListSkeleton.jsx
import React from "react";
import Skeleton from "@mui/material/Skeleton";
import "./ChatSkeleton.scss";

const ChatMessageListSkeleton = ({ className, messageCount = 8 }) => {
  // Generate skeleton messages with different widths for variety
  const renderSkeletonMessages = () => {
    const messages = [];
    // const messageCount = 8; // Number of skeleton messages to show

    for (let i = 0; i < messageCount; i++) {
      const isOwnMessage = i % 3 === 0; // Every third message is "own" message
      const hasDateSeparator = i % 4 === 0; // Every fourth message has a date separator

      if (hasDateSeparator) {
        messages.push(
          <div key={`date-${i}`} className="date-separator-skeleton">
            <Skeleton
              variant="text"
              width={80}
              height={16}
              className="date-skeleton"
            />
          </div>
        );
      }

      messages.push(
        <div
          key={`msg-${i}`}
          className={`message-skeleton ${isOwnMessage ? "own-message" : ""}`}
        >
          {!isOwnMessage && (
            <Skeleton
              variant="circular"
              width={32}
              height={32}
              className="message-avatar-skeleton"
            />
          )}
          <div className="message-content-skeleton">
            {!isOwnMessage && (
              <Skeleton
                variant="text"
                width={100}
                height={16}
                className="sender-skeleton"
              />
            )}
            <Skeleton
              variant="text"
              width={isOwnMessage ? 200 : 180}
              height={20}
              className="text-skeleton"
            />
            <Skeleton
              variant="text"
              width={isOwnMessage ? 160 : 220}
              height={20}
              className="text-skeleton"
            />
            <div className="message-meta-skeleton">
              <Skeleton
                variant="text"
                width={60}
                height={14}
                className="time-skeleton"
              />
              {isOwnMessage && (
                <Skeleton
                  variant="circular"
                  width={16}
                  height={16}
                  className="status-skeleton"
                />
              )}
            </div>
          </div>
        </div>
      );
    }

    return messages;
  };

  return (
    <div className={`chat-message-list-skeleton ${className}`}>
      {renderSkeletonMessages()}
    </div>
  );
};

export default ChatMessageListSkeleton;
