import { html } from '@design.estate/dees-element';
import type { IWifiNetwork } from './eco-applauncher-wifimenu.js';

const mockNetworks: IWifiNetwork[] = [
  { ssid: 'HomeNetwork', signalStrength: 95, secured: true },
  { ssid: 'OfficeWiFi', signalStrength: 75, secured: true },
  { ssid: 'CoffeeShop_Guest', signalStrength: 60, secured: false },
  { ssid: 'Neighbor_5G', signalStrength: 40, secured: true },
  { ssid: 'WeakSignal', signalStrength: 15, secured: true },
];

export const demo = () => html`
  <style>
    .demo-container {
      padding: 48px;
      background: hsl(240 10% 4%);
      min-height: 400px;
      display: flex;
      justify-content: center;
    }
  </style>
  <div class="demo-container">
    <eco-applauncher-wifimenu
      open
      .networks=${mockNetworks}
      .connectedNetwork=${'HomeNetwork'}
      .wifiEnabled=${true}
      @wifi-toggle=${(e: CustomEvent) => console.log('WiFi toggle:', e.detail)}
      @network-select=${(e: CustomEvent) => console.log('Network selected:', e.detail)}
      @settings-click=${() => console.log('Settings clicked')}
    ></eco-applauncher-wifimenu>
  </div>
`;