import type {FunctionComponent} from 'react'
import type ILabel from '@/models/ILabel'
import useLabels from '@/hooks/useLabels'
import {HStack} from '@/components/ui/hstack'
import {Text} from '@/components/ui/text'
import {Button, ButtonIcon} from '@/components/ui/button'
import {Trash} from 'lucide-react-native'

const LabelItem: FunctionComponent<ILabel> = ({id, name, color}) => {
  const {deleteLabel} = useLabels()

  return (
    <HStack className="mx-2 py-2 justify-between items-center">
      <Text style={[{color}]}>{name}</Text>
      <Button onPress={() => deleteLabel(id)} variant="link">
        <ButtonIcon as={Trash} color={color} />
      </Button>
    </HStack>
  )
}

export default LabelItem
