import React from 'react'
import { cn } from '../lib/utils'

interface MyFlatListProps<T> {
  data: T[]
  renderItem: (item: T, index: number) => React.ReactNode
  keyExtractor: (item: T, index: number) => string
  className?: string
  gridCols?: number
  onRefresh?: () => void
  refreshing?: boolean
  ListEmptyComponent?: React.ReactNode
  ListHeaderComponent?: React.ReactNode
  ListFooterComponent?: React.ReactNode
}

export function MyFlatList<T>({
  data,
  renderItem,
  keyExtractor,
  className,
  gridCols,
  onRefresh,
  ListEmptyComponent,
  ListHeaderComponent,
  ListFooterComponent,
}: MyFlatListProps<T>) {
  return (
    <div className={cn('flex-1', className)}>
      {ListHeaderComponent}
      {data.length === 0 && ListEmptyComponent ? (
        ListEmptyComponent
      ) : (
        <div
          className={
            gridCols
              ? `grid grid-cols-${gridCols} gap-4`
              : 'flex flex-col gap-4'
          }
        >
          {data.map((item, index) => (
            <div key={keyExtractor(item, index)}>
              {renderItem(item, index)}
            </div>
          ))}
        </div>
      )}
      {ListFooterComponent}
    </div>
  )
}