"use client";

import * as React from "react";
import InfiniteScroll from "./infinite-scroll";
import { useState } from "react";

export function InfiniteScrollDemo() {
  const [items, setItems] = useState<number[]>(
    Array.from({ length: 20 }, (_, i) => i + 1)
  );
  const [hasMore, setHasMore] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const fetchMoreData = () => {
    if (items.length >= 100) {
      setHasMore(false);
      return;
    }

    setIsLoading(true);

    // Simulate API call
    setTimeout(() => {
      const newItems = Array.from(
        { length: 20 },
        (_, i) => items.length + i + 1
      );
      setItems([...items, ...newItems]);
      setIsLoading(false);
    }, 1500);
  };

  return (
    <div className="w-full h-[400px] overflow-y-auto border rounded-md p-4">
      <InfiniteScroll
        isLoading={isLoading}
        hasMore={hasMore}
        next={fetchMoreData}
      >
        {items.map((item) => (
          <div key={item} className="p-4 mb-4 bg-card border rounded shadow">
            Item {item}
          </div>
        ))}
      </InfiniteScroll>
      {isLoading && (
        <div className="flex justify-center p-4">
          <div className="animate-spin h-6 w-6 border-2 border-primary rounded-full border-t-transparent"></div>
        </div>
      )}
      {!hasMore && (
        <div className="text-center p-4 text-muted-foreground">
          No more items to load
        </div>
      )}
    </div>
  );
}