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

export default function DividerHeading({
  title,
  actions,
}: {
  title: string
  actions?: ReactNode
}) {
  return (
    <StyledContainer>
      <Typography variant="h6">{title}</Typography>
      {actions && <Box>{actions}</Box>}
    </StyledContainer>
  )
}

const StyledContainer = styled(Box)(({ theme }) => ({
  margin: '20px 0',
  paddingBottom: '5px',
  borderBottom: theme.borders.grayLight,
  display: 'flex',
  justifyContent: 'space-between',
  position: 'relative',
  alignItems: 'baseline',
  '& .MuiTypography-root': {
    marginRight: 'auto',
  },
  '&::before': {
    position: 'absolute',
    left: 0,
    bottom: -2,
    borderRadius: '2px',
    content: '""',
    display: 'block',
    width: '60px',
    height: '4px',
    backgroundColor: theme.palette.common.yellow,
  },
}))
