
import {useEffect, useState} from 'react';
import SpinnerImage from '../components/SpinnerImage';

const InventorySection = () => {
   const [opacity, setOpacity] = useState(0);

   useEffect( () => {
       let callback = (entries, observer) => {
           entries.forEach(entry => {
             if (entry.isIntersecting) {
               setOpacity(1);
             } else {
               setOpacity(0);
             }
           });
       };
         const observer = new IntersectionObserver(callback);
         const observed = document.getElementById("inventory-glow");
         observer.observe(observed);

          
   }, [])

  return (
    <section id="inventory" className="inventory-section">
      <div className="inventory-section__container"> 
         <div className='inventory-section__text-box'>
             <div id="inventory-glow" className="inventory-section__glow" style={{opacity: opacity}}></div>
                <h2>Bibliotek för spel och litteratur</h2>
                <p>Vi har ett omfattande utlåningsbibliotek där alla våra medlemmar kan låna brädspel och litteratur. 
                    I biblioteket finns rollspel, brädspel och kortspel som kan lånas kostnadsfritt.  </p>
                
                <p>På hemsidan nedan kan du se vilka spel som finns tillgängliga, vilka åldrar de passar för och hur 
                    många spelare de är anpassade för. När du har valt vilka spel du vill låna kommer vi överens om en 
                    tid för upphämtning.</p>

                <a href="https://boka.vbytes.se/boka" target="_blank" class='glowing-btn'><span class='glowing-txt'>Låna spel</span></a>
        </div>
        <SpinnerImage />
      </div>
    </section>
);
};

export default InventorySection;