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

/**
 * Flexible two-slot layout for displaying supplementary widget information such as totals, timestamps, or controls. Uses flexbox with space-between justification.
 *
 * @example
 * ```tsx
 * <WidgetSubHeader
 *   slotLeft={<Typography variant="caption">Total: 1,234</Typography>}
 *   slotRight={<Typography variant="caption">Updated: 2m ago</Typography>}
 * />
 * ```
 */
export function WidgetSubHeader({
  slotLeft,
  slotRight,
  sx,
}: WidgetSubHeaderProps) {
  return (
    <Box sx={{ ...styles.root, ...sx }} className='widget-subheader'>
      {slotLeft && (
        <Box sx={styles.slotLeft} className='widget-subheader-slot-left'>
          {slotLeft}
        </Box>
      )}
      {slotRight && (
        <Box sx={styles.slotRight} className='widget-subheader-slot-right'>
          {slotRight}
        </Box>
      )}
    </Box>
  )
}