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

import useDeleteAttachment from "~/composables/api/tickets/useDeleteAttachment";

// types

type Props = {
    id: number;
    size: number;
    name: string;
};

type Emits = {
    delete: [value: number];
};

// props

defineProps<Props>();

// Emits

const emit = defineEmits<Emits>();

// queries

const { mutateAsync: deleteAttachment, isPending: deleteAttachmentPending } =
    useDeleteAttachment();

const handleDeleteAttachment = (id: number) => {
    deleteAttachment(
        { id },
        {
            onSuccess: () => {
                emit("delete", id);
            },
        }
    );
};
</script>

<template>
    <li class="w-full flex items-center">
        <div class="w-2/12 flex justify-start">
            <p class="text-sm text-black">{{ (size / 1024).toFixed(2) }}KB</p>
        </div>
        <div class="flex justify-end w-9/12">
            <p class="text-sm text-black">
                {{ name }}
            </p>
        </div>
        <div class="w-1/12 ps-1">
            <button class="cursor-pointer" @click="handleDeleteAttachment(id)">
                <Icon
                    :name="
                        deleteAttachmentPending
                            ? 'ci:svg-spinners-ring-resize'
                            : 'ci:close'
                    "
                    :class="
                        deleteAttachmentPending
                            ? 'text-black/50'
                            : '**:stroke-red-500'
                    "
                    class="pt-1"
                    size="28"
                />
            </button>
        </div>
    </li>
</template>

<style scoped></style>
