<template>
  <div class="device-icon-wrapper" :class="className" v-html="iconSvg">
  </div>
</template>

<script>
export default {
  name: 'DeviceIcon',
  props: {
    type: { type: String, default: 'default' },
    className: { type: String, default: '' }
  },
  computed: {
    iconSvg () {
      const iconMap = {
        stove: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="17" width="20" height="5" rx="2" fill="currentColor" opacity="0.2"/><rect x="3" y="13" width="18" height="4" rx="1" fill="currentColor" opacity="0.3"/><circle cx="12" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="11" r="4" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="11" r="2" fill="currentColor" opacity="0.4"/></svg>`,
        'water-heater': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3h8v2a2 2 0 0 0 2 2h2v2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="12" y="9" width="8" height="4" rx="2" fill="currentColor" opacity="0.3"/><circle cx="14" cy="11" r="0.5" fill="currentColor" opacity="0.7"/><circle cx="16" cy="11" r="0.5" fill="currentColor" opacity="0.7"/><circle cx="18" cy="11" r="0.5" fill="currentColor" opacity="0.7"/></svg>`,
        'wall-boiler': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="14" height="16" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="2"/><rect x="9" y="2" width="6" height="4" rx="1" fill="currentColor" opacity="0.4"/></svg>`,
        default: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="4" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="16" cy="16" r="2" fill="currentColor" opacity="0.4"/></svg>`
      }
      return iconMap[this.type] || iconMap.default
    }
  }
}
</script>

<style lang="less" scoped>
.device-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg { width: 100%; height: 100%; color: inherit; }
}
</style>
