import React from 'react';
import { Actionable, Flexbox, Image, Text, Icon } from '@evlop/native-components';

const CollectionListItem: NativeAppBlock = function ({ data }) {
  const collection = data?.collection || {};

  return (
    <Actionable action={collection?.actions?.openDetailsPage}>
      <Flexbox px="md" py={5} bg="gray-0" flexDirection="row" gap={10} alignItems="center">
        <Image
          size={50}
          borderRadius={5}
          resizeMode="cover"
          src={collection?.image}
          aspectRatio={1}
        />

        <Text numberOfLines={1} fontSize="lg" fontWeight="Bold" style={{ flex: 1 }}>
          {collection?.title}
        </Text>

        <Icon size={20} icon="feather:chevron-right" color="gray-500" />
      </Flexbox>
    </Actionable>
  );
};

export default CollectionListItem;

{}