import React from 'react';
import { css } from '@emotion/css';
import { Heading, Paragraph } from '@knkui/typography';

type HeroProps = {
    title: string
    description?: string
    image?: React.ReactNode
}

const Hero: React.FC<HeroProps> = ({ image, description, title }) => {
    return (
        <div
            className={css({
                paddingLeft: 80,
                minHeight: !!image ? 320 : 224,
                display: 'flex',
                backgroundColor: 'rgb(250, 251, 252)',
                gridArea: 'hero / hero / hero / hero'
            })}
        >
            <div
                className={css({
                    paddingTop: 48,
                    maxWidth: !!image ? 480: 640 
                })}
            >
                <Heading is="h1" size={900}>
                    {title}
                </Heading>
                {!!description && (
                    <Paragraph>
                        {description}
                    </Paragraph>
                )}
            </div>
            {!!image && (
                <div
                    className={css({
                        position: 'relative',
                        overflow: 'hidden',
                        display: 'inline-block',
                        width: 384,
                        height: 320,
                        maxWidth: 384
                    })}
                >
                    {image}
                </div>
            )}
        </div>
    )
}

export default Hero