<template>
  <i :class="['pi', iconClass, 'text-gray-500', 'dark:text-gray-300', 'mr-2']" />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { QrCodePlacement } from '@hereconnect/constants'

const props = defineProps<{ placement: QrCodePlacement }>()

const iconClass = computed(() => {
  const icons: Record<string, string> = {
    car: 'pi-car',
    pet: 'pi-paw',
    door: 'pi-door-closed',
    store: 'pi-shop',
    restaurant_table: 'pi-utensils',
    other: 'pi-question-circle',
  }
  return icons[props.placement] || 'pi-question-circle'
})
</script>
