import { html, css, cssManager } from '@design.estate/dees-element';
import type { IStatusPageConfig } from '../../interfaces/index.js';
import './upladmin-statuspage-config.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        padding: 24px;
        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        min-height: 100vh;
      }

      .demo-title {
        margin: 0 0 24px 0;
        font-size: 14px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    `}
  </style>

  <div class="demo-container">
    <h3 class="demo-title">Status Page Configuration</h3>
    <upladmin-statuspage-config
      .config=${{
        companyName: 'Acme Corporation',
        companyLogo: 'https://via.placeholder.com/200x60?text=ACME',
        supportEmail: 'support@acme.example.com',
        statusPageUrl: 'https://status.acme.example.com',
        legalUrl: 'https://acme.example.com/terms',
        apiEndpoint: 'https://api.acme.example.com/status',
        theme: 'auto',
        whitelabel: false,
        refreshInterval: 60,
        showHistoricalDays: 90,
        enableWebSocket: true,
        enableNotifications: false,
        timeZone: 'America/New_York',
        language: 'en',
        dateFormat: 'relative',
      } as IStatusPageConfig}
    ></upladmin-statuspage-config>
  </div>
`;