<template>

    <div aria-hidden="true" class="project-image">
        <a tabindex="-1" :href="url" target="_blank" :title="`Accéder au site web de ${title}`">
            <img :src="image.large" :srcset="`${image.small} 640w, ${image.medium} 1280w, ${image.large} 1920w`" :alt="`Page d'accueil du site web de ${title}`">
        </a>
    </div>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    defineProps({
        title: String,
        url: String,
        image: Object
    });

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .project-image {
        position: relative;
        line-height: 0;

        a {

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &::after {
                content: '';
                position: absolute;
                z-index: -1;
                top: 0.4rem;
                left: 0.4rem;
                width: 100%;
                height: 100%;
                background-image: var(--secondary-accent-gradient);
                background-size: 100%;
                border-radius: 10px;
            }
            
            img {
                border: 1px solid var(--primary-color);
                border-radius: 10px;
                transition: transform 200ms ease-in-out;
            }
        }

        a:hover,
        a:focus,
        a:active {

            img {
                transform: translate(-0.4rem, -0.4rem);
            }
        }
    }

</style>
