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

export const demoFunc = () => html`
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .demo-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <div class="demo-container">
    <dees-simple-login 
      name="My Application"
      @login=${(e: CustomEvent) => {
        console.log('Login event received:', e.detail);
        const loginData = e.detail?.data || e.detail;
        if (loginData?.username && loginData?.password) {
          alert(`Login attempted with:\nUsername: ${loginData.username}\nPassword: ${loginData.password}`);
          // Here you would typically validate credentials and show the slotted content
        } else {
          console.error('Invalid login data structure:', e.detail);
        }
      }}
    >
      <div style="padding: 40px; text-align: center;">
        <h1>Welcome!</h1>
        <p>This is the slotted content that appears after login.</p>
      </div>
    </dees-simple-login>
  </div>
`;