<script setup lang="ts">
import { ResumeComponentPlacement } from '@/types/resume';
import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import ResumeComponentsListItemToolButton from './ResumeComponentsListItemToolButton.vue';


const props = defineProps<{
    componentPlacement: ResumeComponentPlacement;
}>();

const emit = defineEmits<{
    (e: 'movedUp', component: ResumeComponentPlacement): void;
    (e: 'movedDown', component: ResumeComponentPlacement): void;
    (e: 'unlinked', component: ResumeComponentPlacement): void;
    (e: 'removed', component: ResumeComponentPlacement): void;
}>();
</script>

<template>
    <SidebarMenuItem>
        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.componentPlacement.component_data?.component!.name">
            <div class="flex w-full flex-nowrap justify-between items-center">
                <span>{{ props.componentPlacement.component_data?.component!.name }}</span>
                <div class="sidebar-list-resume-item-tools flex gap-2">
                    <ResumeComponentsListItemToolButton @click.stop="emit('movedUp', props.componentPlacement)" logo-name="ChevronUp" />
                    <ResumeComponentsListItemToolButton @click.stop="emit('movedDown', props.componentPlacement)" logo-name="ChevronDown" />
                    <ResumeComponentsListItemToolButton @click.stop="emit('unlinked', props.componentPlacement)" logo-name="Unlink" />
                    <ResumeComponentsListItemToolButton @click.stop="emit('removed', props.componentPlacement)" logo-name="Trash2" class="text-red-500" />
                </div>
            </div>
        </SidebarMenuButton>
    </SidebarMenuItem>
</template>
