import React, { useState, useEffect } from 'react';
import ToVisit from './categories/ToVisit';
import Tops from './categories/Tops';
import Restaurants from './categories/Restaurants';
import Hotels from './categories/Hotels';
import Nightlife from './categories/Nightlife';
import Shopping from './categories/Shopping';
import Activities from './categories/Activities';

function CategoryPlaces({ params }: IPageProps) {
  const [componentToShow, setComponentToShow] = useState('Tops'); // Initially show Tops and ToVisit
  const components = ['Restaurants', 'Hotels', 'Nightlife', 'Shopping', 'Activities',ToVisit];

  useEffect(() => {
    function handleScroll() {
      const windowHeight = window.innerHeight;
      const scrollY = window.scrollY || window.pageYOffset;
      const bodyHeight = document.body.offsetHeight;

      // Check if scrolled to the bottom
      if (windowHeight + scrollY >= bodyHeight) {
        const nextComponentIndex = components.findIndex(comp => comp === componentToShow) + 1;
        if (nextComponentIndex < components.length) {
          setComponentToShow(components[nextComponentIndex]);
        }
      }
    }

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [componentToShow, components]);

  return (
    <>
      {componentToShow === 'Tops' && <Tops params={params} />}
      {componentToShow === 'Restaurants' && <Restaurants params={params} />}
      {componentToShow === 'Hotels' && <Hotels params={params} />}
      {componentToShow === 'Nightlife' && <Nightlife params={params} />}
      {componentToShow === 'Shopping' && <Shopping params={params} />}
      {componentToShow === 'Activities' && <Activities params={params} />}
      {componentToShow === 'ToVisit' && <ToVisit params={params} />}
    </>
  );
}

export default CategoryPlaces;

字符串