import { Component, Input } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { MealCategory, MEAL_CATEGORY_I18N_KEYS } from '../../core/models/recipe.models';

const STYLES: Record<MealCategory, string> = {
  [MealCategory.Breakfast]: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
  [MealCategory.SecondBreakfast]: 'bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300',
  [MealCategory.Lunch]: 'bg-brand-100 text-brand-800 dark:bg-brand-900/40 dark:text-brand-300',
  [MealCategory.Dinner]: 'bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300',
};

@Component({
  selector: 'app-category-badge',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <span
      class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
      [class]="styles"
    >
      {{ labelKey | translate }}
    </span>
  `,
})
export class CategoryBadgeComponent {
  @Input({ required: true }) category!: MealCategory;

  get labelKey(): string {
    return MEAL_CATEGORY_I18N_KEYS[this.category] ?? 'categories.unknown';
  }

  get styles(): string {
    return STYLES[this.category] ?? '';
  }
}
