import {useLocalSearchParams} from 'expo-router'

import {CrumbList} from '@/components/crumb-list'
import {ModalListScreen} from '@/components/modal-list-screen'
import {usePagedListScreen} from '@/hooks/use-paged-list-screen'
import {profileCrumbs} from '@/stores/profile'

export default function ProfileCrumbsScreen() {
  const {userId} = useLocalSearchParams<{userId: string}>()
  const {items, loading, loadingMore, screenProps} =
    usePagedListScreen(profileCrumbs, userId)

  return (
    <ModalListScreen title="Crumbs" {...screenProps}>
      <CrumbList
        crumbs={items}
        loading={loading}
        loadingMore={loadingMore}
        emptyMessage="No crumbs yet"
      />
    </ModalListScreen>
  )
}
