<template>
    <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
        <div class="bg-white p-4 rounded-lg shadow-lg max-w-3xl w-full text-center">
            <h2 class="text-xl font-bold mb-4">{{ __('styled_image_display.title') }}</h2>
            <img :src="image.path" alt="Styled Image" class="max-w-full h-auto mx-auto mb-4 rounded-md" />
            <div class="flex justify-center space-x-4">
                <button
                    @click="$emit('keep', image)"
                    class="px-6 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
                >
                    {{ __('styled_image_display.keep_button') }}
                </button>
                <button
                    @click="$emit('delete', image)"
                    class="px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
                >
                    {{ __('styled_image_display.delete_button') }}
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    image: {
        type: Object,
        required: true,
    },
});

const emits = defineEmits(['keep', 'delete']);

console.log('StyledImageDisplay: image prop:', props.image);
</script>

<style scoped>
/* Add any specific styles for the modal here if needed */
</style>
