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

type ImagePreviewProps = {
  previewImageUri: string;
  fromUpload?: boolean;
  onLoadEnd?: () => void;
  style?: object;
};
const ImagePreview = ({
  previewImageUri,
  style = {},
  fromUpload = false,
  onLoadEnd = () => {},
}: ImagePreviewProps) => {
  return (
    <View style={{ ...styles.container, ...style }}>
      <Image
        source={{ uri: previewImageUri }}
        style={styles.imagePreview}
        resizeMode={fromUpload ? 'contain' : undefined}
        onLoadEnd={onLoadEnd}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  imagePreview: {
    width: '100%',
    height: '100%',
  },
});

export default ImagePreview;