Expanding Button Group

import { Archive, Clock3, Forward, Reply, Trash2 } from "lucide-react";
import { ExpandingButtonGroup } from "@/components/arc/expanding-button-group/expanding-button-group";

export function MessageActions({ message }: { message: { id: string } }) {
  return (
    <ExpandingButtonGroup
      label="Message actions"
      defaultExpanded="reply"
      items={[
        { id: "reply", label: "Reply", icon: <Reply size={16} />, onSelect: () => console.log("reply") },
        { id: "forward", label: "Forward", icon: <Forward size={16} />, onSelect: () => console.log("forward") },
        { id: "archive", label: "Archive", doneLabel: "Archived", icon: <Archive size={16} />, onSelect: () => console.log("archive") },
        { id: "snooze", label: "Snooze", doneLabel: "Snoozed", icon: <Clock3 size={16} />, onSelect: () => console.log("snooze") },
        { id: "delete", label: "Delete", doneLabel: "Deleted", tone: "danger", icon: <Trash2 size={16} />, onSelect: () => console.log("delete") },
      ]}
    />
  );
}