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

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

export function Content({ sx, children }: ContentProps) {
  return (
    <Box data-slot='content' sx={{ ...styles.content, ...sx }}>
      {children}
    </Box>
  )
}

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

export function Footer({ sx, children }: FooterProps) {
  return (
    <Box data-slot='footer' sx={{ ...styles.footer, ...sx }}>
      {children}
    </Box>
  )
}