<template>
  <div class="flex flex-col items-center gap-1">
    <MediaTitle :file-name="fileName" />
    <!-- TBD: File size will be provided by backend history API -->
    <div v-if="asset.size" class="flex items-center text-xs text-zinc-400">
      <span>{{ formatSize(asset.size) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  formatSize,
  getFilenameDetails
} from '@comfyorg/shared-frontend-utils/formatUtil'
import { computed } from 'vue'

import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
import MediaTitle from './MediaTitle.vue'

const { asset } = defineProps<{
  asset: AssetMeta
  context: AssetContext
}>()

const fileName = computed(() => {
  return getFilenameDetails(asset.name).filename
})
</script>
