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

export const demoFunc = () => html`
  <style>
    ${css`
      h3 {
        margin-top: 32px;
        margin-bottom: 16px;
        color: #333;
      }
      
      @media (prefers-color-scheme: dark) {
        h3 {
          color: #ccc;
        }
      }
      
      .form-demo {
        background: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
      }
      
      @media (prefers-color-scheme: dark) {
        .form-demo {
          background: #1a1a1a;
        }
      }
      
      .button-group {
        display: flex;
        gap: 16px;
        margin: 20px 0;
      }
    `}
  </style>

  <h3>Button Types</h3>
  <dees-button>This is a slotted Text</dees-button>
  <p>
    <dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button>
  </p>
  <p><dees-button type="discreet">This is discreete button</dees-button></p>
  <p><dees-button disabled>This is a disabled button</dees-button></p>
  <p><dees-button type="big">This is a slotted Text</dees-button></p>

  <h3>Button States</h3>
  <p><dees-button status="normal">Normal Status</dees-button></p>
  <p><dees-button disabled status="pending">Pending Status</dees-button></p>
  <p><dees-button disabled status="success">Success Status</dees-button></p>
  <p><dees-button disabled status="error">Error Status</dees-button></p>

  <h3>Buttons in Forms (Auto-spacing)</h3>
  <div class="form-demo">
    <dees-form>
      <dees-input-text label="Name" key="name"></dees-input-text>
      <dees-input-text label="Email" key="email"></dees-input-text>
      <dees-button>Save Draft</dees-button>
      <dees-button type="highlighted">Save and Continue</dees-button>
      <dees-form-submit>Submit Form</dees-form-submit>
    </dees-form>
  </div>

  <h3>Buttons Outside Forms (No auto-spacing)</h3>
  <div class="button-group">
    <dees-button>Button 1</dees-button>
    <dees-button>Button 2</dees-button>
    <dees-button>Button 3</dees-button>
  </div>

  <h3>Manual Form Spacing</h3>
  <div>
    <dees-button inside-form="true">Manually spaced button 1</dees-button>
    <dees-button inside-form="true">Manually spaced button 2</dees-button>
  </div>
`;