import { Component, inject } from '@angular/core';
import { RecipeService } from '../../shared/services/RecipeService';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { RecipeCardGrid } from '../../shared/components/recipe-card-grid/recipe-card-grid';

@Component({
    selector: 'app-recipes-page',
    imports: [RecipeCardGrid],
    templateUrl: './recipes-page.html',
    styleUrl: './recipes-page.css',
})
export class RecipesPage {
    private readonly recipeService = inject(RecipeService);

    protected readonly recipes = injectQuery(() => ({
        queryKey: ['recipes'],
        queryFn: () => this.recipeService.getRecipes(),
    }));
}