import { Box } from '@mui/material'
import type { WrapperActionsProps } from '../types'
import { styles } from '../styles'

const EMPTY_ACTIONS: NonNullable<WrapperActionsProps['actions']> = []

/**
 * Renders action buttons in the widget wrapper header. Each action click event is stopped from propagating to the accordion.
 */
export function Actions({ actions = EMPTY_ACTIONS }: WrapperActionsProps) {
  return (
    <Box sx={styles.actions} className='widget-wrapper-actions'>
      {actions.map((action, index) => {
        // Prefer action.key if present (React elements), else fallback to index
        const key =
          action &&
          typeof action === 'object' &&
          'key' in action &&
          action.key != null
            ? action.key
            : index
        return (
          <Box
            key={key}
            onClick={(e) => {
              e.stopPropagation()
            }}
          >
            {action}
          </Box>
        )
      })}
    </Box>
  )
}