import { Component, computed, input, output } from '@angular/core';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [],
  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.target.checked ? 'dark' : 'light');
  }
}
