import { html } from '@design.estate/dees-element';
import type * as interfaces from '../../interfaces/index.js';

export const demoFunc = () => html`
  <style>
    .demo-secondarymenu-container {
      display: flex;
      height: 100%;
      background: #1a1a1a;
      border-radius: 8px;
    }
    .demo-secondarymenu-container .spacer {
      flex: 1;
      background: #0f0f0f;
    }
  </style>
  <div class="demo-secondarymenu-container">
    <dees-appui-secondarymenu
      .heading=${'Projects'}
      .groups=${[
        {
          name: 'Active',
          iconName: 'lucide:folder',
          items: [
            { key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
            { key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
            { key: 'Database', iconName: 'database', action: () => console.log('Database') },
          ]
        },
        {
          name: 'Archived',
          iconName: 'lucide:archive',
          collapsed: true,
          items: [
            { key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
            { key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
          ]
        },
        {
          name: 'Settings',
          iconName: 'lucide:settings',
          items: [
            { key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
            { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
          ]
        }
      ] as interfaces.ISecondaryMenuGroup[]}
      @item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
    ></dees-appui-secondarymenu>
    <div class="spacer"></div>
  </div>
`;