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

export type CardPadding = 'none' | 'sm' | 'md' | 'lg';

@Component({
  selector: 'app-card',
  standalone: true,
  templateUrl: './card.component.html',
  styleUrl: './card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.app-card--bordered]': 'bordered()',
    '[class.app-card--interactive]': 'interactive()',
    '[class.app-card--pad-none]': "padding() === 'none'",
    '[class.app-card--pad-sm]': "padding() === 'sm'",
    '[class.app-card--pad-md]': "padding() === 'md'",
    '[class.app-card--pad-lg]': "padding() === 'lg'"
  }
})
export class CardComponent {
  readonly padding = input<CardPadding>('md');
  readonly bordered = input(true);
  readonly interactive = input(false);
}
