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

@Component({
  selector: 'ui-divider-demo',
  standalone: true,
  imports: [CommonModule, DividerComponent],
  template: `
    <div class="demo-container">
      <h2>Divider Demo</h2>
      
      <!-- Orientation -->
      <section class="demo-section">
        <h3>Orientation</h3>
        <div class="demo-row">
          <div style="width: 100%;">
            <p>Content above</p>
            <ui-divider orientation="horizontal"></ui-divider>
            <p>Content below</p>
          </div>
        </div>
        <div class="demo-row" style="height: 100px; display: flex; align-items: center;">
          <p>Left content</p>
          <ui-divider orientation="vertical"></ui-divider>
          <p>Right content</p>
        </div>
      </section>
      
      <!-- Style Variants -->
      <section class="demo-section">
        <h3>Style Variants</h3>
        <div class="demo-column">
          <div>
            <p>Solid divider</p>
            <ui-divider variant="solid"></ui-divider>
          </div>
          <div>
            <p>Dashed divider</p>
            <ui-divider variant="dashed"></ui-divider>
          </div>
          <div>
            <p>Dotted divider</p>
            <ui-divider variant="dotted"></ui-divider>
          </div>
        </div>
      </section>
      
      <!-- Thickness Variants -->
      <section class="demo-section">
        <h3>Thickness</h3>
        <div class="demo-column">
          <div>
            <p>Thin divider</p>
            <ui-divider thickness="thin"></ui-divider>
          </div>
          <div>
            <p>Default thickness</p>
            <ui-divider thickness="default"></ui-divider>
          </div>
          <div>
            <p>Thick divider</p>
            <ui-divider thickness="thick"></ui-divider>
          </div>
        </div>
      </section>
      
      <!-- With Content -->
      <section class="demo-section">
        <h3>With Content</h3>
        <div class="demo-column">
          <ui-divider>OR</ui-divider>
          <ui-divider>Section Break</ui-divider>
          <ui-divider>More Content</ui-divider>
        </div>
      </section>
      
      <!-- Combined Examples -->
      <section class="demo-section">
        <h3>Combined Examples</h3>
        <div class="demo-column">
          <ui-divider variant="dashed" thickness="thin">Dashed Thin</ui-divider>
          <ui-divider variant="dotted" thickness="thick">Dotted Thick</ui-divider>
        </div>
      </section>
      
      <!-- Vertical Examples -->
      <section class="demo-section">
        <h3>Vertical Examples</h3>
        <div style="display: flex; height: 80px; align-items: center; gap: 16px;">
          <span>Item 1</span>
          <ui-divider orientation="vertical" variant="solid" thickness="thin"></ui-divider>
          <span>Item 2</span>
          <ui-divider orientation="vertical" variant="dashed"></ui-divider>
          <span>Item 3</span>
          <ui-divider orientation="vertical" variant="dotted" thickness="thick"></ui-divider>
          <span>Item 4</span>
        </div>
      </section>
    </div>
  `,
  styleUrl: './divider-demo.component.scss'
})
export class DividerDemoComponent {}