Sankofa/src/components/infrastructure/VirtualizedTable.tsx

'use client'

import { useVirtualizer } from '@tanstack/react-virtual'
import { useRef } from 'react'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

interface VirtualizedTableProps<T> {
  data: T[]
  columns: Array<{
    key: string
    header: string
    render: (item: T) => React.ReactNode
    width?: number
  }>
  rowHeight?: number
  className?: string
}

export function VirtualizedTable<T extends { id: string }>({
  data,
  columns,
  rowHeight = 50,
  className,
}: VirtualizedTableProps<T>) {
  const parentRef = useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => rowHeight,
    overscan: 5,
  })

  return (
    <div ref={parentRef} className={`overflow-auto ${className}`} style={{ height: '600px' }}>
      <Table>
        <TableHeader className="sticky top-0 bg-studio-dark z-10">
          <TableRow>
            {columns.map((column) => (
              <TableHead
                key={column.key}
                style={{ width: column.width || 'auto' }}
              >
                {column.header}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody
          style={{
            height: `${virtualizer.getTotalSize()}px`,
            position: 'relative',
          }}
        >
          {virtualizer.getVirtualItems().map((virtualRow) => {
            const item = data[virtualRow.index]
            return (
              <TableRow
                key={item.id}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  height: `${virtualRow.size}px`,
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                {columns.map((column) => (
                  <TableCell key={column.key}>{column.render(item)}</TableCell>
                ))}
              </TableRow>
            )
          })}
        </TableBody>
      </Table>
    </div>
  )
}