import { createComponent } from '@graphprotocol/gds-css'

export const MenuMeta = createComponent('Menu', {
  isolate: false,
  cssProps: {
    /** @default 'bottom' // or for nested menus, 'end' */
    side: {
      type: 'values',
      values: ['top', 'bottom', 'start', 'end'],
      defaultValue: 'bottom',
    },
    /** @default 1 // or for nested menus, 3 */
    gap: {
      type: 'number',
      defaultValue: 1,
    },
    /** @default 'start' */
    align: {
      type: 'values',
      values: ['start', 'center', 'end'],
      defaultValue: 'start',
    },
    /** @default 0 // or for nested menus, -2 */
    alignOffset: {
      type: 'number',
      defaultValue: 0,
    },
    /** @default false */
    matchTriggerWidth: {
      type: 'values',
      values: [false, true, 'at-least', 'at-most'],
      defaultValue: false,
    },
    /** @default false */
    matchTriggerHeight: {
      type: 'values',
      values: [false, true, 'at-least', 'at-most'],
      defaultValue: false,
    },
  },
})

export const MenuItemMeta = createComponent('MenuItem')
