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

type Props = {
    index: number;
    size: number;
    link: string;
};

// props

defineProps<Props>();
</script>

<template>
    <NuxtLink
        :to="link"
        target="_blank"
        class="w-full flex items-center cursor-pointer p-2 gap-2 rounded-100 bg-slate-100 border border-slate-300"
    >
        <div class="size-10 flex-center border border-slate-300 rounded-md">
            <Icon name="ci:bi-pin-angle" class="**:fill-black" size="20" />
        </div>
        <div class="flex flex-col gap-1">
            <span class="text-sm line-clamp-1">
                {{ `فایل ضمیمه ${index}` }}
            </span>
            <span class="text-xs">{{ (size / 1024).toFixed(2) }}KB</span>
        </div>
    </NuxtLink>
</template>

<style scoped></style>
