<script setup lang="ts">
import type { DirectoryEntry } from '~/shared/types';

const { entry } = defineProps<{ entry: DirectoryEntry }>();
const emit = defineEmits<{
    back: [];
}>();

const onDrop = onDirectoryEntryDrop(entry, true);
</script>

<template>
    <button
        class="bg-accent/30 border-border flex w-52 translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 select-none"
        @contextmenu.prevent
        @click="() => emit('back')"
        @drop="onDrop"
    >
        <div class="flex flex-row items-center">
            <Icon class="size-6" name="lucide:folder-up" />
        </div>
        <div
            class="flex w-full flex-col items-start justify-stretch gap-0 overflow-hidden text-left leading-6"
        >
            <span class="w-full truncate"
                >..
                <span class="text-muted-foreground truncate text-sm"
                    >({{ entry.name }})</span
                ></span
            >
            <NuxtTime
                v-if="entry.createdAt != null"
                :datetime="entry.createdAt * 1000"
                class="text-muted-foreground w-full truncate text-sm"
                relative
            ></NuxtTime>
        </div>
    </button>
</template>
