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

type BentoGridColumns = 2 | 3 | 4 | 5 | 6 | 'auto-fit-sm' | 'auto-fit-md' | 'auto-fit-lg' | "2" | "3" | "4" | "5" | "6";
type BentoGridGap = 'xs' | 'sm' | 'md' | 'lg';
type BentoGridRows = 'sm' | 'md' | 'lg';

@Component({
  selector: 'ui-bento-grid',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-bento-grid"
      [class]="getComponentClasses()"
      [attr.role]="role"
      [attr.aria-label]="ariaLabel">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './bento-grid.component.scss'
})
export class BentoGridComponent {
  @Input() columns: BentoGridColumns = 'auto-fit-md';
  @Input() gap: BentoGridGap = 'md';
  @Input() rowHeight: BentoGridRows = 'md';
  @Input() dense = true;
  @Input() role = 'grid';
  @Input() ariaLabel = 'Bento grid layout';
  
  getComponentClasses(): string {
    const classes = ['ui-bento-grid'];
    
    if (typeof this.columns === 'number') {
      classes.push(`ui-bento-grid--cols-${this.columns}`);
    } else if (typeof this.columns === 'string') {
      classes.push(`ui-bento-grid--${this.columns}`);
    }
    
    if (this.gap) {
      classes.push(`ui-bento-grid--gap-${this.gap}`);
    }
    
    if (this.rowHeight) {
      classes.push(`ui-bento-grid--rows-${this.rowHeight}`);
    }
    
    if (this.dense) {
      classes.push('ui-bento-grid--dense');
    }
    
    return classes.join(' ');
  }
}