import { Component, OnInit, Input } from '@angular/core';
import { Sermon } from '../../interfaces/sermon';
import { SermonService } from '../../services/sermon.service';


@Component({
  selector: 'recent-sermons-component',
  templateUrl: './recent-sermons.component.html',
  styleUrls: ['./recent-sermons.component.css']  
})
export class RecentSermonsComponent implements OnInit {
    sermons: Sermon[];
    loading: boolean = false;
    @Input()
    numberOfSermonsToShow = 3;

    constructor(private sermonService: SermonService){

    }

    ngOnInit(): void {
        this.getSermons();
    }

    getSermons(): void{
        this.sermons = [];
        this.loading = true;
        this.sermonService.getSermons(this.numberOfSermonsToShow).subscribe(sermons => { 
            this.sermons = sermons;  
            this.loading = false;
        });
    }
}