import Container from '@mui/material/Container';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

export default function Headline({ pageTitle, pageDescription }) {
    return (

        <Container
            sx={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
            }}
        >
            <Stack
                spacing={2}
                useFlexGap
                sx={{ alignItems: 'center', width: { xs: '100%', sm: '70%' } }}
            >
                <Typography
                    variant="h1"
                    sx={{
                        display: 'flex',
                        flexDirection: { xs: 'column', sm: 'row' },
                        alignItems: 'center',
                        fontSize: 'clamp(3rem, 10vw, 3.5rem)',
                    }}
                >
                    {pageTitle}
                </Typography>
                <Typography
                    sx={{
                        textAlign: 'center',
                        color: 'text.secondary',
                        width: { sm: '100%', md: '80%' },
                    }}
                >
                    {pageDescription}
                </Typography>
            </Stack>
        </Container>
    );
}