<template>
  <!-- Simple Icons : logos des marques détectées (chips de topologie) -->
  <span v-if="!typeOnly && brandIcons.length > 0" class="brand-icons">
    <svg
      v-for="icon in brandIcons"
      :key="icon.title"
      :width="size"
      :height="size"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      aria-hidden="true"
    >
      <path :d="icon.path" />
    </svg>
  </span>

  <!-- Lucide : icône générique par type -->
  <component
    v-else
    :is="lucideIcon"
    :size="size"
    :stroke-width="1.75"
    aria-hidden="true"
  />
</template>

<script setup>
import { computed } from 'vue'
import {
  Server, Network, Wifi, Database, Globe, GitFork,
  Camera, Thermometer, Gauge, House, PlugZap, ShieldAlert,
  Lightbulb, BellRing, Antenna, Monitor, Laptop, Tv2, Printer, Smartphone, Box,
} from 'lucide-vue-next'
import { detectBrands } from '../brandIcons.js'

const props = defineProps({
  deviceType:  { type: String,  default: 'other' },
  isGateway:   { type: Boolean, default: false },
  isLivebox:   { type: Boolean, default: false },
  name:        { type: String,  default: '' },
  description: { type: String,  default: '' },
  size:        { type: Number,  default: 18 },
  typeOnly:    { type: Boolean, default: false },
})

const brandIcons = computed(() => detectBrands(props.name, props.description))

const LUCIDE_MAP = {
  server:       Server,
  switch:       Network,
  router:       Wifi,
  nas:          Database,
  gateway:      GitFork,
  livebox:      Globe,
  camera:       Camera,
  temperature:  Thermometer,
  sensor:       Gauge,
  hub:          House,
  smart_plug:   PlugZap,
  alarm:        ShieldAlert,
  light:        Lightbulb,
  doorbell:     BellRing,
  access_point: Antenna,
  desktop:      Monitor,
  laptop:       Laptop,
  smart_tv:     Tv2,
  printer:      Printer,
  smartphone:   Smartphone,
  other:        Box,
}

const lucideIcon = computed(() => {
  if (props.isLivebox) return Globe
  if (props.isGateway) return GitFork
  return LUCIDE_MAP[props.deviceType] || Box
})
</script>

<style scoped>
.brand-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
</style>
