Untitled

import { useState, useEffect } from 'react';
import '../globals.css';

export default function BucketList() {
  const initialItems = [
    { id: 1, text: "Travel to a new country", completed: false },
    { id: 2, text: "Learn a new language", completed: false },
    { id: 3, text: "Try a new cuisine", completed: false },
    { id: 4, text: "Skydive", completed: false },
  ];

  const [items, setItems] = useState(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const loadMoreItems = () => {
    const newItems = [
      { id: items.length + 1, text: "See the Northern Lights", completed: false },
      { id: items.length + 2, text: "Write a book", completed: false },
    ];

    setItems((prevItems) => [...prevItems, ...newItems]);

    if (items.length > 50) {
      setHasMore(false);
    }
  };

  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight
      )
        return;

      if (hasMore) loadMoreItems();
    };

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

  const handleCheckboxChange = (id: number) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, completed: !item.completed } : item
      )
    );
  };

  return (
    <div className="container">
      <h1>My Bucket List</h1>
      <div className="list">
        {items.map((item) => (
          <div key={item.id} className="item">
            <p className={item.completed ? "completed" : ""}>{item.text}</p>
            <input
              type="checkbox"
              checked={item.completed}
              onChange={() => handleCheckboxChange(item.id)}
            />
          </div>
        ))}
      </div>
      {hasMore ? <p>Loading more items...</p> : <p>No more items to load.</p>}
    </div>
  );
}