import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  ViewEncapsulation,
} from '@angular/core';

export const ToolbarSize = {
  Small: 'small',
  Medium: 'medium',
} as const;

export type ToolbarSize = (typeof ToolbarSize)[keyof typeof ToolbarSize];

@Component({
  selector: 'ui-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class]': '["ui-toolbar", sizeClass()]',
  },
})
export class ToolbarComponent {
  size = input<ToolbarSize>('medium');

  sizeClass = computed(() => `ui-toolbar__${this.size()}`);
}
