import PropTypes from 'prop-types';
import styles from './styles.module.css';

const Header = ({ children }) => {

    return (
        <section className={styles['header-wrapper']}>
            <div className={styles.title}>
                {children}
            </div>
            <div className={styles.screenWrapper}>
                {/* <svg viewBox="0 0 480 260" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="5" fill="none" />
                    <defs>
                        <linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="180" gradientUnits="userSpaceOnUse">
                            <stop offset="0%" stop-color="#addfff" stop-opacity="0.15" />
                            <stop offset="100%" stop-color="#addfff" stop-opacity="0" />
                        </linearGradient>
                        <clipPath id="glowClip">
                            <path d="
                        M 30 70
                        Q 240 20 450 70
                        L 470 180
                        L 10 180
                        Z" />
                        </clipPath>
                    </defs>
                    <rect x="0" y="0" width="480" height="260"
                        fill="url(#glowGradient)"
                        clip-path="url(#glowClip)" />
                </svg> */}
                <svg viewBox="0 20 480 100" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="2" fill="none" />

                    <defs>
                        <linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="130" gradientUnits="userSpaceOnUse">
                            <stop offset="0%" stop-color="#addfff" stop-opacity="0.15" />
                            <stop offset="100%" stop-color="#addfff" stop-opacity="0" />
                        </linearGradient>

                        <clipPath id="glowClip">
                            <path d="
                                M 30 70
                                Q 240 20 450 70
                                L 470 130
                                L 10 130
                                Z" />
                        </clipPath>
                    </defs>

                    <rect x="0" y="0" width="480" height="150"
                        fill="url(#glowGradient)"
                        clip-path="url(#glowClip)" />
                </svg>
            </div>
        </section>
    )
}

Header.propTypes = {
    children: PropTypes.node.isRequired
}

export default Header