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

import { SignupForm } from './signup-form';

@Component({
  selector: 'app-sign-up',
  imports: [RouterLink, SignupForm, NgIcon],
  providers: [provideIcons({ lucideGalleryVerticalEnd })],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'block' },
  template: `
    <div 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-signup-form />
          </div>
        </div>
      </div>
      <div class="bg-muted relative hidden lg:block">
        <img
          alt="Sign up background"
          class="absolute inset-0 h-full w-full object-cover brightness-60 grayscale dark:brightness-[0.2] dark:grayscale"
          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 SignUpComponent {}
