<script setup>
import { ref } from 'vue'

defineProps({
    src: {
        type: String,
        required: true,
    },
    alt: {
        type: String,
        default: '',
    },
})

const isOpen = ref(false)

const open = () => {
    isOpen.value = true
}

const close = () => {
    isOpen.value = false
}
</script>

<template>
    <figure class="big-image">
        <img class="original-image" :src="src" :alt="alt" @click="open">

        <div v-show="isOpen" class="popup-image" @click="close">
            <img :src="src" :alt="alt" @click.stop>
        </div>
    </figure>
</template>

<style>
.big-image {
    margin: 0;
}

.original-image {
    margin-bottom: 20px;
    cursor: pointer;
    display: block;
}

.popup-image {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    z-index: 30;
}

.popup-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    width: 85%;
}

@media (max-width: 640px) {
    .popup-image img {
        max-width: 99%;
        width: 100%;
    }
}
</style>