import type {ComponentProps, FunctionComponent, PropsWithChildren} from 'react'
import {Button, ButtonIcon} from '@/components/ui/button'
import {HStack} from '@/components/ui/hstack'
import {View} from 'react-native'

interface SwipeableListItemProps extends PropsWithChildren {
  actionButtons: Array<{
    icon: ComponentProps<typeof ButtonIcon>['as']
    onPress: () => void
  }>
}

const SwipeableListItem: FunctionComponent<SwipeableListItemProps> = ({children, actionButtons}) => {
  return (
    <>
      <View style={[{flexDirection: 'row'}]}>
        {children}
        <HStack>
          {actionButtons.map((action, index) => (
            <Button onPress={() => action.onPress()} key={index} className="ms-4 h-full border-0" variant="outline">
              <ButtonIcon as={action.icon} size="xl" />
            </Button>
          ))}
        </HStack>
      </View>
    </>
  )
}

export default SwipeableListItem
