import {
  DropdownMenu,
  type DropdownMenuOption,
  type DropdownMenuItemData,
} from '@astryxdesign/core'
import type { JSX } from 'react'

export interface ActionItem {
  label: string
  onSelect(): void
  icon?: JSX.Element
  tone?: 'default' | 'danger'
  dividerAbove?: boolean
}

export function ActionsMenu(props: { items: ActionItem[]; label?: string; triggerIcon?: JSX.Element }): JSX.Element {
  const label = props.label ?? 'Actions'
  const options: DropdownMenuOption[] = []
  for (const item of props.items) {
    if (item.dividerAbove) options.push({ type: 'divider' })
    const menuItem: DropdownMenuItemData = {
      label: item.label,
      icon: item.icon,
      variant: item.tone === 'danger' ? 'destructive' : undefined,
      onClick: item.onSelect,
    }
    options.push(menuItem)
  }
  return (
    <DropdownMenu
      button={
        props.triggerIcon
          ? { icon: props.triggerIcon, isIconOnly: true, label }
          : { label }
      }
      items={options}
    />
  )
}