<script setup lang="ts">
// types

type Props = {
    title: string;
    modalId: string;
};

const props = defineProps<Props>();
const { modalId } = toRefs(props);

// state

const isSideShow = useState(`side-modal-${modalId.value}`, () => false);

const isLocked = useScrollLock(window);

// watch

watch(
    () => isSideShow.value,
    (newValue) => {
        isLocked.value = newValue ? true : false;
    }
);
</script>

<template>
    <div class="relative z-1000">
        <div @click="isSideShow = true">
            <slot name="button" />
        </div>
        <div>
            <Transition name="fade">
                <div
                    v-if="isSideShow"
                    class="size-full fixed inset-0 bg-black/20"
                    @click="isSideShow = !isSideShow"
                ></div>
            </Transition>
            <Transition name="fade-right">
                <div
                    v-show="isSideShow"
                    class="flex flex-col w-full lg:w-1/3 bg-white h-full lg:rounded-e-[1.5rem] overflow-hidden fixed top-0 right-0 min-md:flex-col"
                >
                    <div
                        class="w-full flex justify-between items-center py-[1.5rem] lg:py-[2.5rem] px-[1.5rem] lg:px-[3rem]"
                    >
                        <span class="typo-h-5 lg:typo-h-4">
                            {{ title }}
                        </span>

                        <button
                            @click="isSideShow = !isSideShow"
                            class="cursor-pointer size-[3.5rem] -me-5 flex-center rounded-full"
                        >
                            <Icon
                                name="ci:close"
                                size="24"
                                class="**:stroke-black"
                            />
                        </button>
                    </div>

                    <div
                        class="size-full flex flex-col grow overflow-y-auto py-[1.5rem] mb-10 px-[1.5rem] lg:px-[3rem]"
                    >
                        <slot />
                    </div>
                </div>
            </Transition>
        </div>
    </div>
</template>

<style scoped></style>
