import { Component, inject, Input } from '@angular/core';
import { Recipe } from '../../model/Recipe.model';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { ImageService } from '../../service/image.service';

@Component({
    selector: 'app-recipe-page-content',
    imports: [],
    templateUrl: './recipe-page-content.html',
    styleUrl: './recipe-page-content.css',
})
export class RecipePageContent {
    @Input({ required: true })
    public recipe!: Recipe;

    private readonly imageService = inject(ImageService);

    protected mainImageUrl = injectQuery(() => ({
        queryKey: ['images', this.recipe.mainImage.owner.username, this.recipe.mainImage.filename],
        queryFn: () => this.imageService.getImage(this.recipe.mainImage.url),
    }));
}