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

const ChatFooterSkeleton = () => {
  return (
    <div className="chat-footer-skeleton">
      <div className="chat-actions">
        <Skeleton
          variant="rectangular"
          width={80}
          height={24}
          className="action-skeleton"
          style={{ borderRadius: "12px" }}
        />
      </div>
      <div className="chat-input-container">
        <Skeleton
          variant="rectangular"
          width="100%"
          height={40}
          className="input-skeleton"
          style={{ borderRadius: "20px" }}
        />
        <Skeleton
          variant="circular"
          width={36}
          height={36}
          className="emoji-skeleton"
        />
        <Skeleton
          variant="circular"
          width={40}
          height={40}
          className="send-skeleton"
        />
      </div>
    </div>
  );
};

export default ChatFooterSkeleton;
