<script setup>
import {
    isImage,
    isAudio,
    isVideo,
    isText,
    isPdf,
    isDoc,
    isSpreadsheet,
    isArchive,
} from "../../getMimeType.js";
// define props
const { file } = defineProps({
    file: Object,
});
</script>

<template>
    <span>
        <img
            src="../../../../public/images/folder-blue.svg"
            class="w-10 h-10"
            v-if="file.is_folder"
        />
        <template v-else>
            <img
                v-if="isImage(file)"
                src="../../../../public/images/image-x-generic.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isAudio(file)"
                src="../../../../public/images/audio-x-generic.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isVideo(file)"
                src="../../../../public/images/video-x-generic.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isPdf(file)"
                src="../../../../public/images/application-pdf.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isText(file)"
                src="../../../../public/images/text-x-generic.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isDoc(file)"
                src="../../../../public/images/x-office-document.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isSpreadsheet(file)"
                src="../../../../public/images/x-office-spreadsheet.svg"
                class="w-10 h-10"
            />
            <img
                v-else-if="isArchive(file)"
                src="../../../../public/images/ark.svg"
                class="w-10 h-10"
            />
            <img
                v-else
                src="../../../../public/images/application-octet-stream.svg"
                class="w-10 h-10"
            />
        </template>
    </span>
</template>
