<template>
  <component
    :is="glyphComponent"
    class="ivyforms-file-upload__glyph"
    :class="`ivyforms-file-upload__glyph--${size}`"
    aria-hidden="true"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  fileUploadListingGlyphKind,
  type FileUploadListingGlyphKind,
} from '@/utils/fileUploadListingGlyph'
import { fileUploadGlyphIcon } from '@/utils/fileUploadGlyphIcons'

const props = withDefaults(
  defineProps<{
    /** Filename used to pick document / spreadsheet / image glyph */
    fileName?: string
    /** Explicit glyph kind (overrides fileName when set) */
    kind?: FileUploadListingGlyphKind
    /** s = 16px (table chips), m = 18px (entry details row), l = 20px (file card) */
    size?: 's' | 'm' | 'l'
  }>(),
  {
    fileName: '',
    size: 's',
  },
)

const resolvedKind = computed((): FileUploadListingGlyphKind => {
  if (props.kind) return props.kind
  return fileUploadListingGlyphKind(props.fileName || '')
})

const glyphComponent = computed(() => fileUploadGlyphIcon(resolvedKind.value))
</script>

<style scoped lang="scss">
.ivyforms-file-upload {
  &__glyph {
    display: block;
    flex-shrink: 0;
    color: currentColor;

    :deep(svg) {
      display: block;
      width: 100%;
      height: 100%;
    }

    &--s {
      width: 24px;
      height: 24px;
    }

    &--m {
      width: 26px;
      height: 26px;
    }

    &--l {
      width: 28px;
      height: 28px;
    }
  }
}
</style>
