import { Typography } from '@mui/material'
import ActionButton from '../ActionButton'
import { DialogButton } from '../ModalButtons'
import { StyledSubContainer } from './Styles'

const NoDataSection = ({
  title,
  subtitle,
  addButtonTitle,
  addButtonContent,
}) => {
  return (
    <StyledSubContainer>
      <Typography variant="h3">{title}</Typography>
      <Typography variant="subtitle1">{subtitle}</Typography>
      <DialogButton
        anchor={({ open }) => (
          <ActionButton onClick={open}>{addButtonTitle}</ActionButton>
        )}
        content={addButtonContent}
        title={addButtonTitle}
      />
    </StyledSubContainer>
  )
}

export default NoDataSection
