import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

type DividerOrientation = 'horizontal' | 'vertical';
type DividerVariant = 'solid' | 'dashed' | 'dotted';
type DividerThickness = 'thin' | 'default' | 'thick';

@Component({
  selector: 'ui-divider',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-divider"
      [class.ui-divider--horizontal]="orientation === 'horizontal'"
      [class.ui-divider--vertical]="orientation === 'vertical'"
      [class.ui-divider--solid]="variant === 'solid'"
      [class.ui-divider--dashed]="variant === 'dashed'"
      [class.ui-divider--dotted]="variant === 'dotted'"
      [class.ui-divider--thin]="thickness === 'thin'"
      [class.ui-divider--default]="thickness === 'default'"
      [class.ui-divider--thick]="thickness === 'thick'"
      [attr.role]="'separator'"
      [attr.aria-orientation]="orientation">
      
      @if (hasContent) {
        <span class="ui-divider__content">
          <ng-content></ng-content>
        </span>
      }
    </div>
  `,
  styleUrl: './divider.component.scss'
})
export class DividerComponent {
  @Input() orientation: DividerOrientation = 'horizontal';
  @Input() variant: DividerVariant = 'solid';
  @Input() thickness: DividerThickness = 'default';
  
  get hasContent(): boolean {
    return this.orientation === 'horizontal';
  }
}