import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { BackgroundComponent } from '../../ui/background.component';

/** Logo + a glass card over the synthwave background — the login and registration pages. */
@Component({
  selector: 'app-auth-frame',
  imports: [BackgroundComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-background />
    <main class="relative z-10 min-h-screen flex items-center justify-center p-4">
      <div class="w-full max-w-md">
        <div class="flex items-center justify-center gap-3 mb-6">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-pink-500 to-cyan-400 flex items-center justify-center
                      text-slate-950 font-black text-2xl shadow-[0_0_15px_rgba(255,0,127,0.8)] font-orbitron">M</div>
          <div>
            <h1 class="text-3xl font-extrabold font-orbitron tracking-wider neon-text-primary">
              SYNTH <span class="text-cyan-400 font-normal">MAIL</span>
            </h1>
            <p class="text-xs text-cyan-300/70 font-mono tracking-widest uppercase">Reactive mail server</p>
          </div>
        </div>
        <section class="glass-panel static p-6 sm:p-8" [attr.aria-labelledby]="'auth-title'">
          <h2 id="auth-title" class="text-xl font-orbitron font-bold neon-text-secondary mb-1">{{ title() }}</h2>
          <p class="text-xs text-slate-400 font-mono mb-6">{{ subtitle() }}</p>
          <ng-content />
        </section>
      </div>
    </main>
  `
})
export class AuthFrameComponent {
  readonly title = input.required<string>();
  readonly subtitle = input('');
}