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

export const demo = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 400px;
      background: hsl(240 10% 4%);
      border-radius: 12px;
      overflow: hidden;
      padding: 16px;
      box-sizing: border-box;
    }

    .demo-info {
      margin-bottom: 16px;
      padding: 12px;
      background: hsl(240 6% 12%);
      border-radius: 8px;
      color: hsl(0 0% 70%);
      font-size: 14px;
    }

    .demo-frame {
      width: 100%;
      height: calc(100% - 80px);
    }
  </style>
  <div class="demo-container">
    <div class="demo-info">
      The provider frame loads external web apps that implement the ecobridge provider protocol.
      In this demo, no provider URL is set, so it shows the loading state.
    </div>
    <div class="demo-frame">
      <eco-provider-frame
        providerId="demo-provider"
        providerName="Demo Provider"
        providerUrl=""
        @provider-ready=${(e: CustomEvent) => console.log('Provider ready:', e.detail)}
        @provider-features-changed=${(e: CustomEvent) => console.log('Features changed:', e.detail)}
        @provider-response=${(e: CustomEvent) => console.log('Response:', e.detail)}
        @provider-error=${(e: CustomEvent) => console.log('Error:', e.detail)}
      ></eco-provider-frame>
    </div>
  </div>
`;