<template>
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div
            class="px-4 py-5 sm:px-6 flex justify-between items-center flex-wrap sm:flex-nowrap"
        >
            <div>
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    {{ title }}
                </h3>
            </div>
            <div>
                <div class="flex items-start">
                    <div
                        class="flex-shrink-0 inline-flex rounded-full border-2 border-white"
                    >
                        <BaseAvater1
                            :image-size="2"
                            :image-url="profileUrl"
                            :image-alt="name + '의 프로필 사진'"
                        />
                    </div>
                    <div class="ml-4">
                        <div class="text-base font-medium">{{ name }}</div>
                        <div class="text-base text-xs">{{ created }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-200 px-4 py-5 sm:px-6 min-h-[15rem]">
            <div
                ref="myCoolDiv"
                class="prose mt-3 space-y-0 max-w-none"
                v-html="content"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
    name: { type: String, required: true },
    profileUrl: { type: String, required: true },
    title: { type: String, required: true },
    content: { type: String, required: true },
    flags: { type: Array<string>, default: [] },
    attachments: { type: Array<string>, default: [] },
    hitCount: { type: Number, required: true },
    likeCount: { type: Number, required: true },
    dislikeCount: { type: Number, required: true },
    commentCount: { type: Number, required: true },
    reportCount: { type: Number, required: true },
    status: { type: Number, required: true },
    updated: { type: String, required: true },
    created: { type: String, required: true },
});

const myCoolDiv = ref(null);

watch(myCoolDiv, () => {
    if (myCoolDiv.value.childNodes[0].tagName == 'IFRAME') {
        myCoolDiv.value.childNodes[0].classList.add('xl:w-[1243px]');
        myCoolDiv.value.childNodes[0].classList.add('xl:h-[621.5px]');
        myCoolDiv.value.childNodes[0].classList.add('lg:w-[1243px]');
        myCoolDiv.value.childNodes[0].classList.add('lg:h-[621.5px]');
        myCoolDiv.value.childNodes[0].classList.add('md:w-[900px]');
        myCoolDiv.value.childNodes[0].classList.add('md:h-[400px]');
        myCoolDiv.value.childNodes[0].classList.add('w-[310px]');
        myCoolDiv.value.childNodes[0].classList.add('h-[250px]');
    }
});
</script>
