import { Component, computed, input, output } from '@angular/core';
import { ToggleComponent } from '../toggle/toggle.component';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [ToggleComponent],
  templateUrl: './hero.component.html',
  styleUrl: './hero.component.scss'
})
export class HeroComponent {
  theme= input<string>();
  isDarkMode = computed(() => {
    return this.theme() === 'dark';
  });
  themeChange = output<string>();

  public themeClicked(event: any) {
    this.themeChange.emit(event ? 'dark' : 'light');
  }
}