import React from 'react';
import Slider from 'react-slick';

const HomeBanner = () => {
  // const [isMobile, setIsMobile] = useState(false);

  // useEffect(() => {
  //   // Function to check screen width and update isMobile
  //   const handleResize = () => {
  //     setIsMobile(window.innerWidth <= 500); // Set to true if screen width is <= 768px
  //   };

  //   // Call the function on mount and whenever the window resizes
  //   handleResize();
  //   window.addEventListener('resize', handleResize);

  //   // Cleanup the event listener on component unmount
  //   return () => {
  //     window.removeEventListener('resize', handleResize);
  //   };
  // }, []);


  const sliderSettings = {
    // dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,

  };
  return (
    <>
      <div className='home-banner' >
        {/* {isMobile ? (
    
          <Slider {...sliderSettings}>
            <div>
              <img src="/images/2mob.png" alt="Mobile Slide 1" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/3mob.png" alt="Mobile Slide 2" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/4mob.png" alt="Mobile Slide 3" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/mob_home.png" alt="Mobile Slide 4" style={{ width: '100%', height: 'auto' }} />
            </div>
            </Slider>
        ) : ( */}
 
          <Slider {...sliderSettings}>
            <div>
              <img src="/images/0001.jpg" alt="Slide 3" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/0002.jpg" alt="Slide 2" style={{ width: '100%', height: 'auto' }} />
            </div>

            <div>
              <img src="/images/0003.jpg" alt="Slide 1" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/0004.jpg" alt="Slide 1" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/0005.jpg" alt="Slide 1" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/0006.jpg" alt="Slide 1" style={{ width: '100%', height: 'auto' }} />
            </div>
            <div>
              <img src="/images/0007.jpg" alt="Slide 1" style={{ width: '100%', height: 'auto' }} />
            </div>
          </Slider>
        {/* )} */}
       
      </div>
    </>
  )
}

export default HomeBanner
