import {useLocalSearchParams} from 'expo-router'

import {ModalListScreen} from '@/components/modal-list-screen'
import {UserList} from '@/components/user-list'
import {useTrail, useTrailDetailLoading} from '@/stores/trails'

export default function TrailCollaboratorsScreen() {
  const {trailId} = useLocalSearchParams<{trailId: string}>()
  const trail = useTrail(trailId)
  const loading = useTrailDetailLoading(trailId)

  return (
    <ModalListScreen title="Collaborators">
      <UserList
        users={trail?.collaborators ?? []}
        loading={loading}
        showStatus={false}
        emptyMessage="No collaborators yet"
      />
    </ModalListScreen>
  )
}
