import React from 'react';
import './style.sass'
import { MainContext } from '../../context'
import blogBanner from '../../assets/images/blog-banner.png'
const Banner = (props) => {
     return (
       <MainContext.Consumer>{(value) => {
         const colors = value?.colors && typeof value?.colors ==='string' ? JSON.parse(value.colors) : value.colors
         const headerBackground = colors && colors['header-background']
         const headerColor = colors && colors['header-color']

         const style = !value.coverImage && headerBackground ? null : {backgroundImage: `url(${value.coverImage || blogBanner})` }
         return( <section className={`wizrd-home-banner ${ headerColor === '#FFFFFF' ? 'white-text' : 'black-text'}`}  style={ style }>
           {/* <div className="wizrd-home-banner-flags wizrd-flags">
            <div className="wizrd-top-flags">
              <svg width="213" height="106" viewBox="0 0 213 106" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M52 0H0L52 53V0Z" fill="#506BF0"/>
                <path d="M105 0H53L105 53V0Z" fill="#506BF0"/>
                <path d="M159 0H107L159 53V0Z" fill="#506BF0"/>
                <path d="M159 53H107L159 106V53Z" fill="#506BF0"/>
                <path d="M213 0H161L213 53V0Z" fill="#506BF0"/>
                <path d="M213 53H161L213 106V53Z" fill="#506BF0"/>
              </svg>
            </div>
            <div className="wizrd-bottom-flags">
              <svg width="213" height="106" viewBox="0 0 213 106" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M161 106L213 106L161 53L161 106Z" fill="white"/>
                <path d="M108 106L160 106L108 53L108 106Z" fill="white"/>
                <path d="M54 106L106 106L54 53L54 106Z" fill="white"/>
                <path d="M54 53L106 53L54 4.54598e-06L54 53Z" fill="white"/>
                <path d="M-3.8147e-06 106L52 106L-8.4481e-06 53L-3.8147e-06 106Z" fill="white"/>
                <path d="M-3.8147e-06 53L52 53L-8.4481e-06 4.54598e-06L-3.8147e-06 53Z" fill="white"/>
              </svg>
            </div>
           </div> */}
         <div className="container">
           <div className="wizrd-banner-content">
             {props.children}
           </div>
         </div>
       </section>)
       }}
      </MainContext.Consumer>
     );
   };

export default Banner;