import { Box, type SxProps, type Theme } from '@mui/material'
import type { ReactNode } from 'react'
import { styles } from './style'

export interface ActionsProps {
  sx?: SxProps<Theme>
  children: ReactNode
}

/**
 * Slot for the wrapper header's right-side action buttons. The
 * `widget-wrapper-actions` className activates the hover-fade CSS rule on
 * `<Wrapper>`: action children fade in on hover (always visible on coarse-
 * pointer devices), and stay full-opacity when a descendant is marked with
 * `.active` — typically applied by toggled actions.
 *
 * The container also stops click propagation so interacting with an action
 * doesn't toggle the wrapper's collapse.
 */
export function Actions({ sx, children }: ActionsProps) {
  return (
    <Box
      className='widget-wrapper-actions'
      onClick={(e) => e.stopPropagation()}
      sx={{ ...styles.actions, ...sx }}
    >
      {children}
    </Box>
  )
}

export interface OptionsProps {
  sx?: SxProps<Theme>
  children: ReactNode
}

export function Options({ sx, children }: OptionsProps) {
  return (
    <Box onClick={(e) => e.stopPropagation()} sx={{ ...styles.options, ...sx }}>
      {children}
    </Box>
  )
}