import { Box, Divider, Typography } from '@mui/material'
import type { ReactNode } from 'react'

interface SectionContainerProps {
  title?: string
  subtitle?: string
  action?: ReactNode
  children: ReactNode
  className?: string
  divider?: boolean
}

export function SectionContainer({ title, subtitle, action, children, className = '', divider = false }: SectionContainerProps) {
  return (
    <Box className={`flex flex-col gap-3 ${className}`}>
      {(title || action) && (
        <Box className="flex items-center justify-between gap-2">
          <Box>
            {title && <Typography variant="subtitle1" sx={{ fontWeight: 600 }} color="text.primary">{title}</Typography>}
            {subtitle && <Typography variant="caption" color="text.secondary">{subtitle}</Typography>}
          </Box>
          {action}
        </Box>
      )}
      {divider && <Divider />}
      {children}
    </Box>
  )
}
