<template>
  <ul
    class="ivyforms-file-upload__chips ivyforms-flex ivyforms-flex-wrap-wrap ivyforms-align-items-center ivyforms-justify-content-center ivyforms-gap-8"
  >
    <li
      v-for="(file, idx) in files"
      :key="idx"
      class="ivyforms-file-upload__chips-pill ivyforms-flex ivyforms-align-items-center ivyforms-gap-8 ivyforms-py-6 ivyforms-px-10"
    >
      <span class="ivyforms-file-upload__chips-icon ivyforms-flex ivyforms-flex-shrink-0">
        <IvyFileUploadFileGlyph :file-name="file.name" size="s" />
      </span>
      <span class="ivyforms-file-upload__chips-name">{{ file.name }}</span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import IvyFileUploadFileGlyph from '@/views/_components/file-upload/IvyFileUploadFileGlyph.vue'

defineProps<{
  files: { name: string }[]
}>()
</script>

<style scoped lang="scss">
.ivyforms-file-upload {
  &__chips {
    list-style: none;
    margin: 0;
    padding: 0;

    &-pill {
      border-radius: 4px;
      background: var(
        --map-ground-level-2-foreground,
        var(--map-ground-level-2-background, #eef0f3)
      );
      max-width: 100%;
    }

    &-icon {
      color: var(--map-base-dusk-symbol-2, #374151);
    }

    &-name {
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      color: var(--map-base-dusk-symbol-2, #374151);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 240px;
    }
  }
}
</style>
