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

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-batterymenu
      open
      .batteryLevel=${85}
      .isCharging=${false}
      .batterySaverEnabled=${false}
      .timeRemaining=${'2h 30m remaining'}
      @battery-saver-toggle=${(e: CustomEvent) => console.log('Battery saver:', e.detail)}
      @settings-click=${() => console.log('Settings clicked')}
    ></eco-applauncher-batterymenu>
  </div>
`;