<template>
  <div
    class="furnitureIcon"
    :style="{ width: `${props.width}px`, height: `${props.height}px` }"
    tabindex="0"
    :draggable="props.draggable"
  >
    <img :src="furnitureIconUrlMap[props.icon]" alt="" class="img" :draggable="false" />
  </div>
</template>

<script setup lang="ts">
import type { FurnitureIconType } from '@/types/furniture'
import { furnitureIconUrlMap } from '@/const/furniture'

defineOptions({
  name: 'FurnitureIcon',
})

type Props = {
  icon: FurnitureIconType
  width?: number
  height?: number
  draggable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  icon: 'bed',
  width: 50,
  height: 50,
  draggable: true,
})
</script>

<style scoped lang="less">
.furnitureIcon {
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  .img {
    width: 100%;
    height: 100%;
  }
}
</style>
