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

const CollectionListItem: NativeAppBlock = function ({ data }) {
  // In iterate mode each item is passed as `data.collection` according to config.iterate.itemAs
  const collection = data?.collection ?? {};
  const action = collection?.actions?.openDetailsPage;
  const title = collection?.title ?? collection?.name ?? 'Untitled';

  return (
    <Actionable action={action}>
      <Flexbox px="md" py="2xs" bg="gray-0" flexDirection="row" gap="sm" alignItems="center">
        <Text numberOfLines={1} fontSize="lg" fontWeight="Bold" style={{ flex: 1 }}>
          {title}
        </Text>
        <Icon size={20} icon="feather:arrow-right" color="gray-500" />
      </Flexbox>
    </Actionable>
  );
}

export default CollectionListItem;

{}