<template>
  <div class="furnitureList">
    <furniture-item
      class="furniture-item"
      v-for="(icon, index) in props.icons"
      :key="index"
      :icon="icon"
      :width="width"
      :height="height"
      @add="addHandler(icon)"
    >
    </furniture-item>
  </div>
</template>

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

defineOptions({
  name: 'FurnitureList',
})

type Props = {
  icons: FurnitureIconType[]
  width?: number
  height?: number
}

const emit = defineEmits<{
  (e: 'add', icon: FurnitureIconType): void
}>()
const props = withDefaults(defineProps<Props>(), {
  icons: () => [],
  width: 30,
  height: 30,
})

const addHandler = (icon: FurnitureIconType) => {
  emit('add', icon)
}
</script>

<style scoped lang="less">
.furnitureList {
  .furniture-item {
    margin-bottom: 8px;
  }
  .furniture-item:last-child {
    margin-bottom: 0;
  }
}
</style>
