import React, { memo } from 'react'
import { Image, StyleSheet, View } from 'react-native'

const SpaceLogoCard = ({ source, accessibilityLabel, imageStyle = null }) => (
  <View style={styles.card}>
    <Image
      source={source}
      accessibilityLabel={accessibilityLabel}
      resizeMode="contain"
      style={[styles.image, imageStyle]}
    />
  </View>
)

const styles = StyleSheet.create({
  card: {
    width: '100%',
    maxWidth: 280,
    aspectRatio: 16 / 9,
    alignSelf: 'center',
    borderRadius: 20,
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: '100%',
  },
})

export default memo(SpaceLogoCard)