import { html } from '@design.estate/dees-element';

export const demo = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 100%;
      background: hsl(240 10% 4%);
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
  <div class="demo-container">
    <eco-view-peripherals
      .activeCategory=${'all'}
      @device-select=${(e: CustomEvent) => console.log('Device selected:', e.detail)}
      @scan-start=${() => console.log('Scanning started')}
      @scan-complete=${() => console.log('Scanning complete')}
    ></eco-view-peripherals>
  </div>
`;