Infinite Scroll

import { InfiniteScroll } from "@/components/infinite-scroll"
import { useState, useEffect } from "react"

export default function VirtualizedExample() {
  const [items, setItems] = useState([])
  const [hasNext, setHasNext] = useState(true)
  const [loading, setLoading] = useState(false)

  const loadMore = async () => {
    if (loading) return
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 600))

    const newItems = Array.from({ length: 20 }, (_, i) => ({
      id: items.length + i + 1,
      title: `Product ${items.length + i + 1}`,
      description: "High-quality product with detailed specifications and reviews",
      price: Math.floor(Math.random() * 500) + 50,
      category: ["Electronics", "Clothing", "Home", "Sports"][Math.floor(Math.random() * 4)]
    }))

    setItems(prev => [...prev, ...newItems])
    setHasNext(items.length + newItems.length < 500)
    setLoading(false)
  }

  useEffect(() => {
    loadMore()
  }, [])

  return (
    <InfiniteScroll
      items={items}
      hasNextPage={hasNext}
      isLoading={loading}
      onLoadMore={loadMore}
      renderItem={(item) => (
        <div className="group p-6 border border-border rounded-xl bg-card hover:shadow-md transition-all duration-200">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                <h3 className="font-semibold text-lg text-foreground group-hover:text-primary transition-colors">
                  {item.title}
                </h3>
                <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded-full">
                  {item.category}
                </span>
              </div>
              <p className="text-muted-foreground text-sm leading-relaxed mb-3">
                {item.description}
              </p>
              <div className="flex items-center justify-between">
                <span className="text-xl font-bold text-primary">
                  ${item.price}
                </span>
                <div className="flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <div key={i} className="w-3 h-3 bg-yellow-400 rounded-full text-xs"></div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      virtualized={true}
      height={400}
      estimateSize={() => 120}
      overscan={3}
      className="p-4"
    />
  )
}