Shadcn Button Group for React

import {
  ArchiveIcon,
  ArrowLeftIcon,
  CalendarPlusIcon,
  ClockIcon,
  ListFilterIcon,
  MailCheckIcon,
  MoreHorizontalIcon,
  TagIcon,
  Trash2Icon,
} from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

const ButtonGroupDemo = () => {
  const [label, setLabel] = useState("personal");

  const handleLabelChange = (details: { value: string }) => {
    setLabel(details.value);
  };

  return (
    <ButtonGroup>
      <ButtonGroup className="hidden sm:flex">
        <Button aria-label="Go Back" size="icon-md" variant="outline">
          <ArrowLeftIcon aria-hidden="true" />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Archive</Button>
        <Button variant="outline">Report</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Snooze</Button>
        <Menu>
          <MenuTrigger asChild>
            <Button aria-label="More Options" size="icon-md" variant="outline">
              <MoreHorizontalIcon aria-hidden="true" />
            </Button>
          </MenuTrigger>
          <MenuContent className="w-40">
            <MenuGroup>
              <MenuItem value="mark-as-read">
                <MailCheckIcon aria-hidden="true" />
                Mark as Read
              </MenuItem>
              <MenuItem value="archive">
                <ArchiveIcon aria-hidden="true" />
                Archive
              </MenuItem>
            </MenuGroup>
            <MenuSeparator />
            <MenuGroup>
              <MenuItem value="snooze">
                <ClockIcon aria-hidden="true" />
                Snooze
              </MenuItem>
              <MenuItem value="add-to-calendar">
                <CalendarPlusIcon aria-hidden="true" />
                Add to Calendar
              </MenuItem>
              <MenuItem value="add-to-list">
                <ListFilterIcon aria-hidden="true" />
                Add to List
              </MenuItem>
              <MenuSub>
                <MenuSubTrigger>
                  <TagIcon aria-hidden="true" />
                  Label As...
                </MenuSubTrigger>
                <MenuSubContent>
                  <MenuRadioGroup
                    onValueChange={handleLabelChange}
                    value={label}
                  >
                    <MenuRadioItem value="personal">Personal</MenuRadioItem>
                    <MenuRadioItem value="work">Work</MenuRadioItem>
                    <MenuRadioItem value="other">Other</MenuRadioItem>
                  </MenuRadioGroup>
                </MenuSubContent>
              </MenuSub>
            </MenuGroup>
            <MenuSeparator />
            <MenuGroup>
              <MenuItem value="trash" variant="destructive">
                <Trash2Icon aria-hidden="true" />
                Trash
              </MenuItem>
            </MenuGroup>
          </MenuContent>
        </Menu>
      </ButtonGroup>
    </ButtonGroup>
  );
};