<script setup lang="ts">

// types

type Props = {
    tag: string;
    date: string;
    comments: number;
    title: string;
    description: string;
    link: string;
    variant?: "sm" | "lg";
}

// props

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

</script>

<template>
    <div
        :class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
        class="max-h-[700px] h-[700px] relative"
    >

        <Tag
            v-if="variant === 'lg'"
            class="bg-success-500 absolute left-10 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="/img/hero-bg.jpg"
                class="absolute size-full object-cover z-10"
                alt=""
            />
        </div>

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

            <div class="flex items-center 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' ? 'typo-h-4' : 'typo-h-6'"
                    class="text-white"
                >
                    برسی آیفون ۱۶ پرومکس
                </span>
                <p
                    :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
                    class="typo-p-md text-white text-justify"
                >
                    نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    کتابهای زیادی در شصت و سه درصد گذشته.
                </p>
            </div>

            <span class="underline text-white typo-p-md">
                بیشتر بخوانید...
            </span>

        </div>

        <img
            v-if="variant === 'lg'"
            src="/img/hero-bg.jpg"
            class="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>
</template>