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

export type ListContainerElevation = 'none' | 'sm' | 'md' | 'lg';
export type ListContainerSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';

@Component({
  selector: 'ui-list-container',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule],
  template: `
    <div 
      class="list-container"
      [class]="getContainerClasses()"
      role="list"
      [attr.aria-label]="ariaLabel"
    >
      <ng-content></ng-content>
      
      <!-- Fade indicator for scrollable content -->
      @if (scrollable && fadeIndicator) {
        <div class="list-container__fade-bottom"></div>
      }
    </div>
  `,
  styleUrls: ['./list-container.component.scss']
})
export class ListContainerComponent {
  @Input() elevation: ListContainerElevation = 'none';
  @Input() spacing: ListContainerSpacing = 'sm';
  @Input() scrollable = false;
  @Input() maxHeight?: string;
  @Input() fadeIndicator = true;
  @Input() dense = false;
  @Input() rounded = false;
  @Input() ariaLabel?: string;

  getContainerClasses(): string {
    const classes = [
      `list-container--elevation-${this.elevation}`,
      `list-container--spacing-${this.spacing}`
    ];

    if (this.scrollable) classes.push('list-container--scrollable');
    if (this.dense) classes.push('list-container--dense');
    if (this.rounded) classes.push('list-container--rounded');
    if (this.maxHeight) classes.push('list-container--max-height');

    return classes.join(' ');
  }
}