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

interface FrameOverlayProps {
  frameAsset: any; // require() asset
}

/**
 * Renders a frame PNG overlay on top of the photo.
 * The frame PNG must have a transparent center (alpha=0) so the photo shows through.
 * Positioned absolutely to cover the entire photo canvas.
 */
export default function FrameOverlay({ frameAsset }: FrameOverlayProps) {
  if (!frameAsset) return null;

  return (
    <View style={styles.container} pointerEvents="none" collapsable={false}>
      <Image
        source={frameAsset}
        style={styles.frameImage}
        resizeMode="cover"
        fadeDuration={0}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  frameImage: {
    width: '100%',
    height: '100%',
  },
});