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

const ChatHeaderSkeleton = () => {
  return (
    <div className="chat-header-skeleton">
      <div className="chat-header-left">
        <Skeleton
          variant="circular"
          width={40}
          height={40}
          className="avatar-skeleton"
        />
        <div className="chat-info">
          <Skeleton
            variant="text"
            width={120}
            height={24}
            className="title-skeleton"
          />
          <Skeleton
            variant="text"
            width={80}
            height={16}
            className="status-skeleton"
          />
        </div>
      </div>
      <div className="chat-header-right">
        <Skeleton
          variant="circular"
          width={36}
          height={36}
          className="icon-skeleton"
        />
        <Skeleton
          variant="circular"
          width={36}
          height={36}
          className="icon-skeleton"
        />
        <Skeleton
          variant="circular"
          width={36}
          height={36}
          className="icon-skeleton"
        />
      </div>
    </div>
  );
};

export default ChatHeaderSkeleton;
