import React from "react";
import ReplyIcon from "@mui/icons-material/Reply";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import PushPinIcon from "@mui/icons-material/PushPin";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import { Button } from "../../../../Button";
import "./ChatMessageActions.styles.scss";

export const ChatMessageActions = ({
  messageId,
  onReply,
  onReact,
  onBookmark,
  onPin,
  onMore,
  actions = ["reply", "bookmark", "pin", "more"],
  className = "message-actions",
}) => {
  const defaultActions = {
    reply: {
      icon: <ReplyIcon />,
      handler: onReply,
      ariaLabel: "Reply to message",
    },
    bookmark: {
      icon: <BookmarkBorderIcon />,
      handler: onBookmark,
      ariaLabel: "Bookmark message",
    },
    pin: {
      icon: <PushPinIcon />,
      handler: onPin,
      ariaLabel: "Pin message",
    },
    more: {
      icon: <MoreHorizIcon />,
      handler: onMore,
      ariaLabel: "More options",
    },
  };

  return (
    <div className={className}>
      {actions.map((actionKey) => {
        const action = defaultActions[actionKey];
        if (!action) return null;

        return (
          <Button
            key={actionKey}
            icon={action.icon}
            onClick={() => action.handler && action.handler(messageId)}
            ariaLabel={action.ariaLabel}
            className="message-action-button"
            size="small"
          />
        );
      })}
    </div>
  );
};
