import { gql } from "@apollo/client"
import { css } from "@emotion/css"
import { ControlledMenu, MenuItem } from "@szhsin/react-menu"
import { useTranslation } from "react-i18next"
import { useDropdownMenu } from "~/options/hooks/useDropdownMenu"

export function TagContextMenu({ tag }: { tag: string }) {
  const { t } = useTranslation()
  const { menuProps } = useDropdownMenu(css`
    .szh-menu--state-open {
      min-width: 171px;
    }
  `)

  return {
    menu: (
      <ControlledMenu {...menuProps}>
        <MenuItem key="rename" onClick={rename}>
          <BiRename />
          {t("editor.verbRename")}
        </MenuItem>
      </ControlledMenu>
    ),
  }
}
