import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <main [@routeAnimations]="getRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </main>
  `,
  animations: [
    trigger('routeAnimations', [
        transition('* <=> *', [
          style({ transform: 'translateX(100%)', opacity: 0 }),
          animate('300ms ease-in-out', style({ transform: 'translateX(0)', opacity: 1 }))
        ])
      ])
      
  ]
})
export class AppComponent {
  getRoute(outlet: RouterOutlet) {
    return outlet?.activatedRouteData?.['animation'] || '';
  }
}
