import type {FunctionComponent} from 'react'
import LabelItem from '../../components/labels/labelItem'
import {LegendList} from '@legendapp/list'
import {useGetLabels} from '@/db/labelsAPI'

const LabelsPage: FunctionComponent = () => {
  const {data: labels} = useGetLabels()

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

export default LabelsPage
