import { FlashList } from '@shopify/flash-list'
import React from 'react'

import type { Post } from '@/api'
import { usePosts } from '@/api'
import { Card } from '@/components/demo/card'
import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui'

export default function Feed() {
  // const { data, isPending, isError } = usePosts()
  const data: Post[] = []
  const isPending = false
  const isError = false

  const renderItem = React.useCallback(({ item }: { item: Post }) => <Card {...item} />, [])

  if (isError) {
    return (
      <View>
        <Text> Error Loading data </Text>
      </View>
    )
  }
  return (
    <View className="flex-1 ">
      <FocusAwareStatusBar />
      <FlashList
        data={data}
        renderItem={renderItem}
        keyExtractor={(_, index) => `item-${index}`}
        ListEmptyComponent={<EmptyList isLoading={isPending} />}
        estimatedItemSize={300}
      />
    </View>
  )
}