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

type SectionSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type SectionBackground = 'transparent' | 'surface' | 'surface-secondary' | 'surface-elevated';
type SectionAlign = 'start' | 'center' | 'end';

@Component({
  selector: 'ui-section',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <section 
      [ngClass]="getClasses()"
      [attr.aria-label]="ariaLabel"
      [attr.role]="role">
      
      <ng-content></ng-content>
    </section>
  `,
  styleUrl: './section.component.scss'
})
export class SectionComponent {
  @Input() spacing: SectionSpacing = 'md';
  @Input() background: SectionBackground = 'transparent';
  @Input() align: SectionAlign = 'start';
  @Input() fullWidth = false;
  @Input() contained = true;
  @Input() ariaLabel?: string;
  @Input() role?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-section': true,
      [`ui-section--spacing-${this.spacing}`]: true,
      [`ui-section--${this.background}`]: this.background !== 'transparent',
      [`ui-section--align-${this.align}`]: this.align !== 'start',
      'ui-section--full-width': this.fullWidth,
      'ui-section--contained': this.contained
    };

    return classes;
  }
}