import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { connectionStatusTranslations } from '../../translations';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ErrorService } from '../error.service';

@Component({
    selector: 'iqser-connection-status',
    templateUrl: './connection-status.component.html',
    styleUrls: ['./connection-status.component.scss'],
    animations: [
        trigger('animateOpenClose', [
            state('offline', style({ top: '100px' })),
            state('online', style({ top: '-100px' })),
            transition('* => offline', animate('1s ease-out')),
            transition('* => online', animate('3s ease-in')),
        ]),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConnectionStatusComponent {
    connectionStatusTranslations = connectionStatusTranslations;
    protected readonly errorService = inject(ErrorService);
}