<script lang="ts" setup>

// import

import useGetProduct from "~/composables/api/product/useGetProduct";
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";

// state

const route = useRoute();
const id = route.params.id as string | undefined;

const { data: product } = useGetProduct(id);

const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;

</script>

<template>
    <section v-if="selectedVariant?.video" class="h-[110svh] w-full relative bg-black mt-[5rem]">
        <video
            :src="selectedVariant.video"
            class="object-cover absolute size-full"
            playsinline
            webkit-playsinline
            muted
            autoplay
            loop
        />
        <div class="size-full absolute inset-0 bg-black/20" />
        <div class="absolute max-sm:flex items-center justify-center max-sm:px-5 sm:right-10 bottom-10 w-full">
            <StickyCard
                :color="selectedVariant.color!"
                :price="selectedVariant.price"
                :picture="selectedVariant.images[0].image"
                :title="product!.name"
                class="max-sm:!w-full"
            />
        </div>
    </section>
</template>
