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

export const demoFunc = () => html`
  <dees-appui-view
    .viewConfig=${{
      id: 'demo-view',
      name: 'Demo View',
      description: 'A demonstration view',
      iconName: 'lucide:home',
      tabs: [
        {
          key: 'overview',
          iconName: 'lucide:lineChart',
          action: () => console.log('Overview tab'),
          content: html`<div style="padding: 20px;">Overview Content</div>`
        },
        {
          key: 'details',
          iconName: 'lucide:fileText',
          action: () => console.log('Details tab'),
          content: html`<div style="padding: 20px;">Details Content</div>`
        }
      ],
      menuItems: [
        { key: 'General', action: () => console.log('General') },
        { key: 'Advanced', action: () => console.log('Advanced') },
      ]
    }}
  ></dees-appui-view>
`;