Virtual scrolling for large lists with react-window

import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface VirtualizedPostListProps {
  posts: Post[]
}

export function VirtualizedPostList({ posts }: VirtualizedPostListProps) {
  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
    <div style={style}>
      <PostCard post={posts[index]} />
    </div>
  )

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          itemCount={posts.length}
          itemSize={250} // Fixed height per item
          width={width}
        >
          {Row}
        </List>
      )}
    </AutoSizer>
  )
}