import { defineComponent, h } from 'vue';
import htm from 'htm';
const html = htm.bind(h);

export default defineComponent({
  name: 'UserCard',
  props: { item: { type: Object, required: true }, mode: { type: String, default: 'user' } },
  emits: ['toggleDisable', 'remove'],
  setup(props, { emit }) {
    function toggle() { emit('toggleDisable', props.item); }
    function remove() { emit('remove', props.item); }
    return () => html`<div class="card">
      <div class="row">
        <b>${props.mode === 'user' ? props.item.username : (props.item.device || props.item.username)}</b>
        <span class="chip">VLAN ${props.item.vlan}</span>
        ${props.item.disabled ? html`<span class="chip" style="color:#b33">deshabilitado</span>` : html`<span class="chip">activo</span>`}
        <span class="spacer"></span>
        <button class="icon-btn" onClick=${toggle}>${props.item.disabled ? 'Habilitar' : 'Deshabilitar'}</button>
        <button class="icon-btn" onClick=${remove}>Eliminar</button>
      </div>
      <div class="muted" style="margin-top:6px; font-size:12px;">${props.item.devices ? props.item.devices.length : 0} dispositivos</div>
    </div>`;
  }
});

