import React from "react";
import { HStack, Image, Text, VStack } from "native-base";
import type { AccessibilityProps, ImageSourcePropType } from "react-native";
import { EnhancedTouchableOpacity } from "@flip.id/ui-kit";
import { ForwardMedium } from "../../../icons/navigation";

interface ListItemProps {
  title: string;
  description?: string;
  icon?: ImageSourcePropType;
  customButton?: React.ReactElement;
  as?: React.ComponentType<any>;
  onPress?: () => void;
}

export const ListItem: React.FC<ListItemProps & AccessibilityProps> = (
  props
) => {
  const { as, icon, onPress, title, description, customButton, ...rest } =
    props;
  const isDescAvailable = !!description;
  return (
    <EnhancedTouchableOpacity
      as={as}
      activeOpacity={0.8}
      onPress={onPress}
      {...rest}
    >
      <HStack bg="neutral.White" p="16px" alignItems="center" space="4">
        {!!icon && (
          <Image
            height={isDescAvailable ? "46px" : "24px"}
            width={isDescAvailable ? "46px" : "24px"}
            resizeMode="contain"
            source={icon}
            rounded={100}
          />
        )}
        <VStack flex={1}>
          <Text fontSize="sm" lineHeight="22px">
            {title}
          </Text>
          <Text color="neutral.SecondaryText" fontSize="sm">
            {description}
          </Text>
        </VStack>
        {!!customButton ? (
          customButton
        ) : (
          <ForwardMedium
            color="neutral.SecondaryText"
            backgroundColor="neutral.White"
            rounded={100}
          />
        )}
      </HStack>
    </EnhancedTouchableOpacity>
  );
};

export default ListItem;