import type { ReactNode } from 'react'
import { useLegendConfig } from '../../provider'
import { useLegendGroupId } from '../contexts'
import { LegendOverflowMenu } from '../legend-overflow-menu/legend-overflow-menu'

export interface LegendGroupMenuProps {
  /** Menu items; async items use `stopPropagation` + `runAsyncMenuAction`. */
  children?: ReactNode
}

/**
 * Overflow (⋮) menu for a group header. Renders nothing outside a `Legend.Group`.
 *
 * @experimental This API is new and may change in a future release.
 */
export function LegendGroupMenu({ children }: LegendGroupMenuProps) {
  const groupId = useLegendGroupId()
  const { labels } = useLegendConfig()

  return (
    <LegendOverflowMenu gate={groupId !== null} ariaLabel={labels.groupOptions}>
      {children}
    </LegendOverflowMenu>
  )
}