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

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

/**
 * Stateless layout: CSS grid `1fr auto`. Children self-place — typically
 * `<Widget.SelectionSummary />` (left) and `<Widget.Toolbox>` (right).
 */
export function Subheader({ sx, children }: SubheaderProps) {
  return <Box sx={{ ...styles.root, ...sx }}>{children}</Box>
}