<script setup lang="ts">
import { Resume } from '@/types/resume';
import SidebarListResumeItemToolButton from './SidebarListResumeItemToolButton.vue';
import { httpApi } from '@/lib/utils';
import { router } from '@inertiajs/vue3';

const props = defineProps<{
    resume: Resume;
}>();

const emit = defineEmits<{
    (e: 'deleted', resume: Resume): void;
    (e: 'duplicated'): void;
}>();

function duplicateResume() {
    router.post(route('resumes.duplicate', props.resume));
    emit('duplicated', props.resume);
}

async function deleteResume() {
    const { error } = await httpApi(route('resumes.destroy', props.resume), {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        },
    });

    if (error) {
        console.error('Failed to delete resume:', error);
        return;
    }

    emit('deleted', props.resume);
}
</script>

<template>
    <div class="flex w-full flex-nowrap justify-between items-center">
        <span class="font-medium h-min">{{ props.resume.name ?? 'Sans titre' }}</span>
        <div class="sidebar-list-resume-item-tools flex gap-2">
            <SidebarListResumeItemToolButton @click.prevent="duplicateResume" logoName="BookCopy" />
            <SidebarListResumeItemToolButton @click.prevent="deleteResume" logoName="Trash2" class="text-red-500" />
        </div>
    </div>
</template>
