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 100" 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>
            <linearGradient
              id="glowGradient"
              x1="0"
              y1="80"
              x2="0"
              y2="130"
              gradientUnits="userSpaceOnUse"
            >
              <stop offset="0%" stop-color="#9c6ad5d4" stop-opacity="0.3" />
              <stop offset="30%" stop-color="#9c6ad5d4" stop-opacity="0.2" />
              <stop offset="60%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
              <stop offset="70%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
              <stop offset="80%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
              <stop offset="90%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
              <stop offset="100%" stop-color="#9c6ad5d4" 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="900"
            fill="url(#glowGradient)"
            clip-path="url(#glowClip)"
          />
        </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" />
                <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>
      </div>
    </section>
  );
};

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

export default Header;
