import { Typography } from '@mui/material'
import type { ReactNode } from 'react'
import { styles } from './styles'

export function GroupWrapper({
  title,
  children,
  collapsed = false,
}: {
  title: string
  children: ReactNode
  collapsed?: boolean
}) {
  if (collapsed) return children

  return (
    <>
      <Typography
        variant='caption'
        color='textSecondary'
        sx={styles.groupWrapper.content}
      >
        {title}
      </Typography>
      {children}
    </>
  )
}