import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TimezoneSelectComponent } from '@calendar/shared';

@Component({
  selector: 'calendar-timezone-selector',
  standalone: true,
  imports: [FormsModule, TimezoneSelectComponent],
  template: `
    <cal-timezone-select
      [ngModel]="timezone"
      (ngModelChange)="timezoneChange.emit($event)"
      [label]="label"
      [compact]="compact"
      [preferredTimezone]="preferredTimezone"
    />
  `,
  styles: [
    `
      :host {
        display: block;
        width: 100%;
      }
    `,
  ],
})
export class TimezoneSelectorComponent {
  @Input() timezone = '';
  @Input() label = 'Timezone';
  @Input() compact = false;
  /** Fallback when timezone list loads and current value is missing (e.g. host event TZ). */
  @Input() preferredTimezone: string | null = null;
  @Output() timezoneChange = new EventEmitter<string>();
}