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 20 480 130" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M 30 70 Q 240 20 450 70"
            stroke="white"
            stroke-width="3"
            fill="none"
          />

          <defs>
            <mask id="glowMask">
              <linearGradient
                id="fadeGradient"
                x1="0"
                y1="70"
                x2="0"
                y2="150"
                gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" />
                <stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" />
                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
              </linearGradient>

              <path
                d="
          M 30 70
          Q 240 20 450 70
          L 500 150
          L -20 150
          Z"
                fill="url(#fadeGradient)"
              />
            </mask>

            <linearGradient
              id="glowColor"
              x1="0"
              y1="100"
              x2="0"
              y2="150"
              gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" />
              <stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" />
              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
            </linearGradient>
          </defs>
          <path
            d="M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z"
            fill="url(#glowColor)"
            mask="url(#glowMask)"
          />
        </svg> */}
        <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M 30 70 Q 240 20 450 70"
            stroke="white"
            stroke-width="3"
            fill="none"
          />

          <defs>
            <mask id="glowMask">
              <linearGradient
                id="fadeGradient"
                x1="0"
                y1="70"
                x2="0"
                y2="150"
                gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" />
                <stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" />
                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
              </linearGradient>

              <path
                d="
          M 30 70
          Q 240 20 450 70
          L 480 150
          L 0 150
          Z"
                fill="url(#fadeGradient)"
              />
            </mask>

            <linearGradient
              id="glowColor"
              x1="0"
              y1="100"
              x2="0"
              y2="150"
              gradientUnits="userSpaceOnUse">
              <stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" />
              <stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" />
              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
            </linearGradient>
          </defs>

          <path
            d="M 30 70 Q 240 20 450 70 L 480 150 L 0 150 Z"
            fill="url(#glowColor)"
            mask="url(#glowMask)"
          />
        </svg>
      </div>
    </section>
  );
};

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

export default Header;
