<script setup lang="ts">
import { computed } from 'vue'
import { FileText, Image, File } from 'lucide-vue-next'

const props = defineProps<{
  filename: string
  fileType: string
  fileSize: number
}>()

const icon = computed(() => {
  if (props.fileType.startsWith('image/')) return Image
  if (props.fileType.includes('pdf') || props.fileType.includes('document')) return FileText
  return File
})

const fileSizeDisplay = computed(() => {
  const size = props.fileSize
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
  return (size / (1024 * 1024)).toFixed(1) + ' MB'
})

const ext = computed(() => {
  const parts = props.filename.split('.')
  return parts.length > 1 ? parts.pop()?.toUpperCase() : ''
})
</script>

<template>
  <div class="file-message">
    <div class="file-icon">
      <component :is="icon" :size="24" />
      <span v-if="ext" class="file-ext">{{ ext }}</span>
    </div>
    <div class="file-info">
      <span class="file-name">{{ filename }}</span>
      <span class="file-size">{{ fileSizeDisplay }}</span>
    </div>
  </div>
</template>

<style scoped>
.file-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-cyan-dim);
  border: 1px solid rgba(0, 245, 212, 0.2);
  border-radius: var(--radius-md);
  min-width: 200px;
  max-width: 300px;
}

.file-icon {
  position: relative;
  color: var(--accent-cyan);
  flex-shrink: 0;
}

.file-ext {
  position: absolute;
  bottom: -2px;
  right: -4px;
  font-size: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--bg-void);
  background: var(--accent-cyan);
  padding: 1px 2px;
  border-radius: 2px;
}

.file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.file-name {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}
</style>
