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



export default function App(props: AppBlockProps) {
  const collection = props.data?.collection ?? props.data;

  if (!collection) return null;

  return (
    <Actionable action={collection.actions?.openDetailsPage}>
      <Box bg="gray-0" flexDirection="row" gap={10} alignItems="center" borderRadius={10} style={{ overflow: 'hidden' }}>
        <ImageBackground resizeMode="cover" src={collection.image} aspectRatio={2}>
          <Flexbox width="100%" height="100%" bg="black-alpha-700" alignItems="center" justifyContent="center">
            <Text textAlign="center" fontSize="3xl" color="gray-0" fontWeight="Semibold">
              {collection.title}
            </Text>
          </Flexbox>
        </ImageBackground>
      </Box>
    </Actionable>
  );
}

{}