import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function SectionHeadline(props) {
  const {
    alwaysCenter = false,
    description,
    id,
    inverted = false,
    overline,
    title
  } = props;
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      m: alwaysCenter ? 'auto' : null
    },
    children: [overline && /*#__PURE__*/_jsx(Typography, {
      id: id,
      component: "h2",
      variant: "body2",
      sx: {
        fontWeight: 'bold',
        color: 'primary.main',
        mb: 1,
        ...(alwaysCenter && {
          textAlign: 'center'
        })
      },
      children: overline
    }), typeof title === 'string' ? /*#__PURE__*/_jsx(Typography, {
      variant: "h2",
      sx: theme => ({
        maxWidth: 500,
        ...(inverted ? {
          color: '#fff'
        } : {
          color: 'primaryDark.900',
          ...theme.applyDarkStyles({
            color: 'grey.100'
          })
        }),
        ...(alwaysCenter && {
          textAlign: 'center',
          maxWidth: '100%'
        })
      }),
      children: title
    }) : (/*#__PURE__*/React.cloneElement(title, {
      style: {
        maxWidth: 500,
        ...(alwaysCenter && {
          maxWidth: '100%',
          textAlign: 'center'
        }),
        ...(inverted && {
          color: '#fff'
        })
      }
    })), description && /*#__PURE__*/_jsx(Typography, {
      sx: theme => ({
        mt: 1,
        mb: 3,
        maxWidth: 500,
        ...(inverted ? {
          color: 'grey.400'
        } : {
          color: 'grey.800',
          ...theme.applyDarkStyles({
            color: 'grey.500'
          })
        }),
        ...(alwaysCenter && {
          textAlign: 'center',
          mx: 'auto'
        })
      }),
      children: description
    })]
  });
}