<script lang="ts" setup>

// types

type Props = {
    selectedSlide: number;
    slides: {
        id: number;
        picture: string;
    }[]
}

// props

const props = defineProps<Props>();
const { slides, selectedSlide } = toRefs(props);

// emit
const emit = defineEmits(["update:selectedSlide"]);

// computed

const selectedSlideDetail = computed(() => {
    return slides.value.find((item) => {
        return item.id === selectedSlide.value;
    })!;
});

// method

const changeSlide = (id: number) => {
    emit("update:selectedSlide", id);
};

</script>

<template>
    <div class="flex flex-col relative gap-4">
        <div class="bg-red-300 w-full relative aspect-square overflow-hidden rounded-200">
            <img
                class="size-full absolute object-cover"
                :src="selectedSlideDetail.picture"
                :alt="String(selectedSlideDetail.id)"
            />
        </div>
        <div class="flex items-center justify-between gap-4">
            <div
                @click="changeSlide(slide.id)"
                v-for="slide in slides"
                :class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'"
                class="cursor-pointer aspect-square w-[108px] ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
                :key="slide.id"
            >
                <img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" />
            </div>
        </div>
    </div>
</template>