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

export const demo = () => html`
  <style>
    .demo-container {
      padding: 40px;
      background: #f5f5f5;
    }

    .demo-section {
      margin-bottom: 40px;
    }

    h3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
    }

    dees-pdf-viewer {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }

    .viewer-tall {
      height: 800px;
    }

    .viewer-compact {
      height: 500px;
    }
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Full Featured PDF Viewer with Toolbar</h3>
      <dees-pdf-viewer
        class="viewer-tall"
        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        showToolbar="true"
        showSidebar="false"
        initialZoom="page-fit"
      ></dees-pdf-viewer>
    </div>

    <div class="demo-section">
      <h3>PDF Viewer with Sidebar Navigation</h3>
      <dees-pdf-viewer
        class="viewer-tall"
        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        showToolbar="true"
        showSidebar="true"
        initialZoom="page-width"
      ></dees-pdf-viewer>
    </div>

    <div class="demo-section">
      <h3>Compact Viewer without Controls</h3>
      <dees-pdf-viewer
        class="viewer-compact"
        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
        showToolbar="false"
        showSidebar="false"
        initialZoom="auto"
      ></dees-pdf-viewer>
    </div>
  </div>
`;