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.ui-bento-grid--cols-{{columns}}]="typeof columns === 'number'"
      [class.ui-bento-grid--{{columns}}]="typeof columns === 'string'"
      [class.ui-bento-grid--gap-{{gap}}]="gap"
      [class.ui-bento-grid--rows-{{rowHeight}}]="rowHeight"
      [class.ui-bento-grid--dense]="dense"
      [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';
}