ТЗ: Виртуализированный каталог на 100 000+ позиций с TanStack Virtual и скроллом

'use client'

import React, { useRef } from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'

interface VirtualTableProps<T> {
  items: T[]
  renderRow: (item: T, index: number) => React.ReactNode
  estimateSize?: number
}

export function VirtualTable<T>({ items, renderRow, estimateSize = 56 }: VirtualTableProps<T>) {
  const parentRef = useRef<HTMLDivElement>(null)

  const rowVirtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => estimateSize,
    overscan: 5
  })

  return (
    <div
      ref={parentRef}
      className="h-[600px] overflow-auto border border-border rounded-xl bg-bg-surface custom-scrollbar relative"
    >
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative'
        }}
      >
        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
          const item = items[virtualRow.index]
          return (
            <div
              key={virtualRow.key}
              ref={rowVirtualizer.measureElement}
              data-index={virtualRow.index}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                transform: `translateY(${virtualRow.start}px)`
              }}
            >
              {renderRow(item, virtualRow.index)}
            </div>
          )
        })}
      </div>
    </div>
  )
}