import type {FunctionComponent} from 'react'
import useLabels from '../../hooks/useLabels'
import LabelItem from '../../components/labels/labelItem'
import {LegendList} from '@legendapp/list'

const LabelsPage: FunctionComponent = () => {
  const {labels} = useLabels()

  return (
    <>
      <LegendList
        data={labels}
        renderItem={label => <LabelItem {...label.item} />}
        keyExtractor={label => label.id}
        recycleItems={true}
      />
    </>
  )
}

export default LabelsPage
