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

import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";

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

// props

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

const { date } = toRefs(props);

// state

const createdAt = usePersianTimeAgo(new Date(date.value));
</script>

<template>
    <NuxtLink
        :to="`/article/${slug}`"
        :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
        class="group w-full relative block"
    >
        <Tag
            v-if="variant === 'lg'"
            class="bg-slate-950 absolute left-6 top-6 z-20"
        >
            {{ category.name }}
        </Tag>

        <div
            v-if="variant === 'sm'"
            class="aspect-square w-full rounded-150 overflow-hidden relative"
        >
            <Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
                {{ category.name }}
            </Tag>

            <NuxtImg
                :src="image"
                loading="lazy"
                fetch-priority="low"
                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' : 'invert mt-6'"
            class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
        >
            <div class="flex items-center gap-4 lg:gap-6">
                <div class="flex items-center gap-2">
                    <Icon
                        name="ci:comment"
                        class="**:stroke-white size-3 md:size-3.5"
                    />
                    <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
                </div>
                <div class="flex items-center gap-2">
                    <Icon
                        name="ci:calendar"
                        class="**:stroke-white size-3 md:size-3.5"
                    />
                    <span class="typo-p-xs md:typo-p-sm text-white">
                        {{ createdAt }}
                    </span>
                </div>
            </div>

            <div class="flex gap-4 flex-col">
                <span
                    :class="variant === 'lg' ? 'line-clamp-2' : ''"
                    class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
                >
                    {{ title }}
                </span>
                <p
                    v-if="variant === 'sm'"
                    class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
                >
                    تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در
                    زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
                </p>
            </div>
        </div>

        <NuxtImg
            v-if="variant === 'lg'"
            loading="lazy"
            fetch-priority="low"
            :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"
        />
    </NuxtLink>
</template>
