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

/**
 * Demo for dees-pagination component
 */
export const demoFunc = () => html`
  <div style="display: flex; align-items: center; gap: 16px;">
    <!-- Small set of pages -->
    <div style="display: flex; flex-direction: column; gap: 4px;">
      <span>5 pages, starting at 1:</span>
      <dees-pagination
        .total=${5}
        .page=${1}
        @page-change=${(e: CustomEvent) => console.log('Page changed to', e.detail.page)}
      ></dees-pagination>
    </div>

    <!-- Larger set of pages -->
    <div style="display: flex; flex-direction: column; gap: 4px;">
      <span>15 pages, starting at 8:</span>
      <dees-pagination
        .total=${15}
        .page=${8}
        @page-change=${(e: CustomEvent) => console.log('Page changed to', e.detail.page)}
      ></dees-pagination>
    </div>
  </div>
`;