import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideGalleryVerticalEnd } from '@ng-icons/lucide';

import { LoginForm } from './login-form';

@Component({
  selector: 'app-sign-in',
  imports: [RouterLink, LoginForm, NgIcon, TranslocoDirective],
  providers: [provideIcons({ lucideGalleryVerticalEnd }), provideTranslocoScope('auth')],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'block' },
  template: `
    <div
      *transloco="let t; scope: 'auth'"
      class="grid min-h-svh lg:grid-cols-2"
    >
      <div class="flex flex-col gap-4 p-6 md:p-10">
        <div class="flex justify-center gap-2 md:justify-start">
          <a
            class="flex items-center gap-2 font-medium"
            routerLink="/"
          >
            <div
              class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"
            >
              <ng-icon
                name="lucideGalleryVerticalEnd"
                class="text-base"
              />
            </div>
            Aurora Catalyst
          </a>
        </div>
        <div class="flex flex-1 items-center justify-center">
          <div class="w-full max-w-xs">
            <app-login-form />
          </div>
        </div>
      </div>
      <div class="bg-muted relative hidden lg:block">
        <img
          class="absolute inset-0 h-full w-full object-cover brightness-60 grayscale dark:brightness-[0.2] dark:grayscale"
          [alt]="t('auth.signIn.BackgroundAlt')"
          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0"
        />
      </div>
    </div>
  `,
})
export default class SignInComponent {}
