import React from 'react';
import { View, StyleSheet } from 'react-native';
import { CardImageProps } from './types';
import { Image, ImageStyle} from 'expo-image';


const CardImage: React.FC<CardImageProps> = ({
  source,
  style,
  height = 200,
  width = '100%',
  resizeMode = 'cover',
  borderRadius,
  overlay,
}) => (
  <View style={styles.container}>
    <Image
      source={source}
      style={[
        styles.image,
        // {
        //   height,
        //   width,
        //   resizeMode,
        //   borderRadius,
        // },
        style,
      ]}
    />
    {overlay && (
      <View style={styles.overlay}>
        {overlay}
      </View>
    )}
  </View>
);

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  image: {
    width: '100%',
    height: 200,
  },
  overlay: {
    ...StyleSheet.absoluteFill,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default CardImage;