<script setup lang="ts">

// types

type Props = {
    id: number;
    tag: string;
    date: string;
    title: string;
    description: string;
    variant?: "sm" | "lg";
    image: string,
}

// props

const props = withDefaults(defineProps<Props>(), {
    variant: "lg"
});
const {} = toRefs(props);

</script>

<template>
    <NuxtLink :to="`/article/${id}`" class="block">
        <div
            :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
            class="group w-full relative"
        >

            <Tag
                v-if="variant === 'lg'"
                class="bg-success-500 absolute left-6 lg:left-10 top-6 lg:top-10 z-20"
            >
                اسپیکر
            </Tag>

            <div
                v-if="variant === 'sm'"
                class="h-[350px] rounded-150 overflow-hidden relative"
            >
                <Tag
                    class="bg-success-500 absolute z-20 left-6 top-6"
                >
                    اسپیکر
                </Tag>

                <img
                    :src="image"
                    class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                    alt=""
                />
            </div>

            <div
                :class="variant === 'lg' ? 'absolute px-6 lg:px-10' : 'invert mt-8'"
                class="bottom-6 lg:bottom-10 flex flex-col gap-4 lg:gap-6 z-20"
            >

                <div class="flex items-center gap-4 lg:gap-6">
                    <div class="flex items-center gap-2">
                        <Icon
                            name="ci:comment"
                            size="18"
                            class="**:stroke-white"
                        />
                        <span class="typo-p-sm text-white">
                            ۰ نظر
                        </span>
                    </div>
                    <div class="flex items-center gap-2">
                        <Icon
                            name="ci:calendar"
                            size="18"
                            class="**:stroke-white"
                        />
                        <span class="typo-p-sm text-white">
                        ۳۱ مهر ۱۴۰۳
                    </span>
                    </div>
                </div>

                <div class="flex gap-4 flex-col">
                    <span
                        :class="variant === 'lg' ? 'line-clamp-2' : ''"
                        class="text-lg font-medium lg:typo-h-6 text-white"
                    >
                        {{ title }}
                    </span>
<!--                    <p-->
<!--                        :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"-->
<!--                        class="text-white text-justify"-->
<!--                        v-html="description"-->
<!--                    />-->
                </div>

                <NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">
                    بیشتر بخوانید...
                </NuxtLink>

            </div>

            <img
                v-if="variant === 'lg'"
                :src="image"
                class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                alt=""
            />

            <div
                v-if="variant === 'lg'"
                class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
            />
        </div>
    </NuxtLink>
</template>