<template>
  <div class="flex items-center gap-2 text-sm text-muted-foreground">
    <Upload class="h-4 w-4" />
    <span>Max file size: {{ formatFileSize(uploadLimitBytes) }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { Upload } from 'lucide-vue-next'
import { useSettingsStore } from '@/stores/settings'

const settingsStore = useSettingsStore()

const uploadLimitBytes = computed(() => settingsStore.uploadLimitBytes)

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes'
  
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

onMounted(() => {
  // Fetch upload limit if not already loaded
  if (!settingsStore.uploadLimit) {
    settingsStore.fetchUploadLimit()
  }
})
</script>