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

export const demo = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 100%;
      min-height: 600px;
      background: hsl(240 10% 4%);
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
  <div class="demo-container">
    <eco-view-browser
      .bookmarks=${[
        { id: 'bm-1', title: 'Google', url: 'https://www.google.com', createdAt: new Date() },
        { id: 'bm-2', title: 'GitHub', url: 'https://github.com', createdAt: new Date() },
        { id: 'bm-3', title: 'Stack Overflow', url: 'https://stackoverflow.com', createdAt: new Date() },
        { id: 'bm-4', title: 'MDN Web Docs', url: 'https://developer.mozilla.org', createdAt: new Date() },
      ]}
      .showBookmarksBar=${true}
      @navigate=${(e: CustomEvent) => console.log('Navigate:', e.detail)}
      @bookmark-add=${(e: CustomEvent) => console.log('Bookmark add:', e.detail)}
      @bookmark-remove=${(e: CustomEvent) => console.log('Bookmark remove:', e.detail)}
      @browser-back=${() => console.log('Browser back')}
      @browser-forward=${() => console.log('Browser forward')}
      @browser-refresh=${() => console.log('Browser refresh')}
      @browser-stop=${() => console.log('Browser stop')}
      @new-tab=${() => console.log('New tab')}
      @open-devtools=${() => console.log('Open devtools')}
    ></eco-view-browser>
  </div>
`;