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

const mockDevices: IAudioDevice[] = [
  { id: 'speakers', name: 'Built-in Speakers', type: 'speaker' },
  { id: 'headphones', name: 'AirPods Pro', type: 'bluetooth' },
  { id: 'hdmi', name: 'LG Monitor', type: 'hdmi' },
];

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-soundmenu
      open
      .volume=${70}
      .muted=${false}
      .outputDevices=${mockDevices}
      .activeDeviceId=${'speakers'}
      @volume-change=${(e: CustomEvent) => console.log('Volume:', e.detail)}
      @mute-toggle=${(e: CustomEvent) => console.log('Mute:', e.detail)}
      @device-select=${(e: CustomEvent) => console.log('Device:', e.detail)}
      @settings-click=${() => console.log('Settings clicked')}
    ></eco-applauncher-soundmenu>
  </div>
`;