import { Component, computed } from '@angular/core';
import { LucideAngularModule, MoonIcon, SunIcon } from 'lucide-angular';
import { Theme } from 'src/app/core/services/theme';
import { ZardSwitchComponent } from '../switch/switch.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-mode-toggle',
  imports: [LucideAngularModule, ZardSwitchComponent, FormsModule, ReactiveFormsModule],
  templateUrl: './mode-toggle.html',
  styleUrl: './mode-toggle.css',
  standalone: true,
})
export class ModeToggle {
  readonly SunIcon = SunIcon;
  readonly MoonIcon = MoonIcon;

  isDark = computed(() => this.theme.mode() === 'dark');

  constructor(private theme: Theme) {}

  toggle() {
    this.theme.toggle();
  }
}
