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

export const demoFunc = () => html`
  <style>
    .demo-mainmenu-container {
      display: flex;
      height: 100%;
      background: #1a1a1a;
      border-radius: 8px;
    }
    .demo-mainmenu-container .spacer {
      flex: 1;
      background: #0f0f0f;
    }
  </style>
  <div class="demo-mainmenu-container">
    <dees-appui-mainmenu
      .logoIcon=${'lucide:box'}
      .logoText=${'Acme App'}
      .menuGroups=${[
        {
          tabs: [
            { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
            { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
          ]
        },
        {
          name: 'Workspace',
          tabs: [
            { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
            { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
            { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
          ]
        },
        {
          name: 'Analytics',
          tabs: [
            { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
            { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
          ]
        }
      ]}
      .bottomTabs=${[
        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
        { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
      ]}
    ></dees-appui-mainmenu>
    <div class="spacer"></div>
  </div>
`;