import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from '../../../../../ui-essentials/src/lib/components/layout/section/section.component';

@Component({
  selector: 'ui-section-demo',
  standalone: true,
  imports: [CommonModule, SectionComponent],
  template: `
    <div class="demo-container">
      <h2>Section Component Demo</h2>
      
      <!-- Spacing Variants -->
      <section class="demo-section">
        <h3>Spacing Variants</h3>
        @for (spacing of spacings; track spacing) {
          <div class="demo-example">
            <h4>{{ spacing }} spacing</h4>
            <ui-section [spacing]="spacing" background="surface" [contained]=false>
              <div class="section-content">
                <h5>Section with {{ spacing }} spacing</h5>
                <p>This section demonstrates the {{ spacing }} spacing variant with consistent vertical padding.</p>
              </div>
            </ui-section>
          </div>
        }
      </section>
      
      <!-- Background Variants -->
      <section class="demo-section">
        <h3>Background Variants</h3>
        @for (background of backgrounds; track background) {
          <div class="demo-example">
            <h4>{{ background }} background</h4>
            <ui-section spacing="md" [background]="background" [contained]="true">
              <div class="section-content">
                <h5>{{ background | titlecase }} Background Section</h5>
                <p>This section demonstrates the {{ background }} background variant.</p>
              </div>
            </ui-section>
          </div>
        }
      </section>
      
      <!-- Alignment Variants -->
      <section class="demo-section">
        <h3>Text Alignment</h3>
        @for (align of alignments; track align) {
          <div class="demo-example">
            <h4>{{ align }} aligned</h4>
            <ui-section spacing="md" background="surface-secondary" [align]="align" [contained]="true">
              <div class="section-content">
                <h5>{{ align | titlecase }} Aligned Content</h5>
                <p>This section content is aligned to the {{ align }}.</p>
              </div>
            </ui-section>
          </div>
        }
      </section>
      
      <!-- Width Variants -->
      <section class="demo-section">
        <h3>Width Variants</h3>
        <div class="demo-example">
          <h4>Contained (default)</h4>
          <ui-section spacing="md" background="surface" [contained]="true">
            <div class="section-content">
              <h5>Contained Section</h5>
              <p>This section is contained with max-width and centered margins.</p>
            </div>
          </ui-section>
        </div>
        
        <div class="demo-example">
          <h4>Full Width</h4>
          <ui-section spacing="md" background="surface-elevated" [fullWidth]="true" [contained]="false">
            <div class="section-content">
              <h5>Full Width Section</h5>
              <p>This section spans the full width of its container without constraints.</p>
            </div>
          </ui-section>
        </div>
      </section>
      
      <!-- Accessibility Examples -->
      <section class="demo-section">
        <h3>Accessibility Features</h3>
        <div class="demo-example">
          <h4>With ARIA label</h4>
          <ui-section spacing="md" background="surface" ariaLabel="Main content area" [contained]="true">
            <div class="section-content">
              <h5>Accessible Section</h5>
              <p>This section includes proper ARIA labeling for screen readers.</p>
            </div>
          </ui-section>
        </div>
      </section>
      
      <!-- Real-world Examples -->
      <section class="demo-section">
        <h3>Real-world Examples</h3>
        
        <div class="demo-example">
          <h4>Hero Section</h4>
          <ui-section spacing="xl" background="surface-elevated" align="center" [contained]="true">
            <div class="section-content">
              <h2>Welcome to Our Platform</h2>
              <p>This is a hero section with extra large spacing and centered content.</p>
              <button class="demo-button">Get Started</button>
            </div>
          </ui-section>
        </div>
        
        <div class="demo-example">
          <h4>Content Section</h4>
          <ui-section spacing="lg" background="transparent" [contained]="true">
            <div class="section-content">
              <h3>About Our Services</h3>
              <p>This is a standard content section with large spacing and transparent background.</p>
              <ul>
                <li>Feature one with detailed description</li>
                <li>Feature two with comprehensive details</li>
                <li>Feature three with full specifications</li>
              </ul>
            </div>
          </ui-section>
        </div>
        
        <div class="demo-example">
          <h4>Footer Section</h4>
          <ui-section spacing="md" background="surface-secondary" [fullWidth]="true" [contained]="false">
            <div class="section-content" style="max-width: 1200px; margin: 0 auto; padding: 0 16px;">
              <h4>Contact Information</h4>
              <p>This footer section spans full width with contained inner content.</p>
            </div>
          </ui-section>
        </div>
      </section>
    </div>
  `,
  styleUrl: './section-demo.component.scss'
})
export class SectionDemoComponent {
  spacings = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  backgrounds = ['transparent', 'surface', 'surface-secondary', 'surface-elevated'] as const;
  alignments = ['start', 'center', 'end'] as const;
}