import type {FunctionComponent} from 'react'
import type {ILabel} from '@/models/ILabel'
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'
import {useDeleteLabel} from '@/db/labelsAPI'

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

  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
