<script lang="ts" setup>
import NetworkHero from './NetworkHero.vue'
</script>

<template>
  <div style="position: relative;">
    <NetworkHero :node-count="10" primary-color="#3b82f6" secondary-color="#06b6d4" />
    <!-- Central server icon overlay -->
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <div
        style="
          width: 64px;
          height: 64px;
          border-radius: 14px;
          background: rgba(59, 130, 246, 0.15);
          border: 1px solid rgba(59, 130, 246, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(8px);
        "
      >
        <VIcon icon="tabler-server" size="32" color="#3b82f6" />
      </div>
    </div>
  </div>
</template>
