import { useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useDashboardData } from './hooks/useDashboardData';
import './App.css';

export default function App() {
  const data = useDashboardData();
  const parentRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35, // Consistent row height
  });

  return (
    <div className="dashboard-container">
      <h1>Market Live Stream</h1>
      
      {/* Viewport for virtualization */}
      <div ref={parentRef} className="table-viewport">
        <div 
          className="table-content" 
          style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
        >
{rowVirtualizer.getVirtualItems().map((virtualRow) => (
  <div
    key={virtualRow.key}
    className="row"
    style={{ transform: `translateY(${virtualRow.start}px)` }}
  >
    <span>{data[virtualRow.index].symbol}</span>
    <span className="price-cell">${data[virtualRow.index].price}</span>
  </div>
))}        </div>
      </div>
    </div>
  );
}