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

@Component({
  selector: 'ui-center-demo',
  standalone: true,
  imports: [CommonModule, CenterComponent],
  template: `
    <div class="demo-container">
      <h2>Center Demo</h2>
      
      <!-- Axis Variants -->
      <section class="demo-section">
        <h3>Center Axis</h3>
        <div class="demo-row">
          <div class="demo-example">
            <h4>Both Axes (Default)</h4>
            <ui-center [customMinHeight]="'200px'" class="demo-boundary">
              <div class="demo-content">Centered Both Ways</div>
            </ui-center>
          </div>
          
          <div class="demo-example">
            <h4>Horizontal Only</h4>
            <ui-center axis="horizontal" [customMinHeight]="'200px'" class="demo-boundary">
              <div class="demo-content">Centered Horizontally</div>
            </ui-center>
          </div>
          
          <div class="demo-example">
            <h4>Vertical Only</h4>
            <ui-center axis="vertical" [customMinHeight]="'200px'" class="demo-boundary">
              <div class="demo-content">Centered Vertically</div>
            </ui-center>
          </div>
        </div>
      </section>
      
      <!-- Max Width Constraints -->
      <section class="demo-section">
        <h3>Max Width Constraints</h3>
        <div class="demo-column">
          <div class="demo-example">
            <h4>Small (640px)</h4>
            <ui-center maxWidth="sm" padding="md" class="demo-boundary">
              <div class="demo-content">
                This content is constrained to a maximum width of 640px and will be centered within its container.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
              </div>
            </ui-center>
          </div>
          
          <div class="demo-example">
            <h4>Medium (768px)</h4>
            <ui-center maxWidth="md" padding="md" class="demo-boundary">
              <div class="demo-content">
                This content is constrained to a maximum width of 768px and will be centered within its container.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </ui-center>
          </div>
          
          <div class="demo-example">
            <h4>Large (1024px)</h4>
            <ui-center maxWidth="lg" padding="md" class="demo-boundary">
              <div class="demo-content">
                This content is constrained to a maximum width of 1024px and will be centered within its container.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
              </div>
            </ui-center>
          </div>
        </div>
      </section>
      
      <!-- Spacing Variants -->
      <section class="demo-section">
        <h3>Spacing</h3>
        <div class="demo-row">
          <div class="demo-example">
            <h4>Small Padding</h4>
            <ui-center padding="sm" class="demo-boundary">
              <div class="demo-content">Small Padding</div>
            </ui-center>
          </div>
          
          <div class="demo-example">
            <h4>Medium Padding</h4>
            <ui-center padding="md" class="demo-boundary">
              <div class="demo-content">Medium Padding</div>
            </ui-center>
          </div>
          
          <div class="demo-example">
            <h4>Large Padding</h4>
            <ui-center padding="lg" class="demo-boundary">
              <div class="demo-content">Large Padding</div>
            </ui-center>
          </div>
        </div>
      </section>
      
      <!-- Inline Variant -->
      <section class="demo-section">
        <h3>Inline Center</h3>
        <div class="demo-example">
          <p>
            Here is some text with an
            <ui-center [inline]="true" class="demo-inline">
              <span class="demo-content-small">inline centered element</span>
            </ui-center>
            in the middle of the paragraph.
          </p>
        </div>
      </section>
      
      <!-- Practical Examples -->
      <section class="demo-section">
        <h3>Practical Examples</h3>
        
        <div class="demo-example">
          <h4>Card Layout</h4>
          <ui-center maxWidth="md" padding="lg">
            <div class="demo-card">
              <h3>Welcome Message</h3>
              <p>This card is centered with constrained width for better readability.</p>
              <button class="demo-button">Get Started</button>
            </div>
          </ui-center>
        </div>
        
        <div class="demo-example">
          <h4>Loading State</h4>
          <ui-center [customMinHeight]="'300px'">
            <div class="demo-loading">
              <div class="demo-spinner"></div>
              <p>Loading...</p>
            </div>
          </ui-center>
        </div>
        
        <div class="demo-example">
          <h4>Hero Section</h4>
          <ui-center [customMinHeight]="'400px'" maxWidth="lg" padding="xl">
            <div class="demo-hero">
              <h2>Hero Title</h2>
              <p>A compelling hero message that's perfectly centered and constrained for optimal reading.</p>
              <button class="demo-button demo-button--primary">Call to Action</button>
            </div>
          </ui-center>
        </div>
      </section>
    </div>
  `,
  styleUrl: './center-demo.component.scss'
})
export class CenterDemoComponent {}