import { Component, inject } from "@angular/core";
import { LucideAngularModule, Search, ShoppingCart, User } from "lucide-angular";
import { AuthService, AuthState } from "@core/services/auth-service";
import { CartService } from "@app/core/services/cart-service";
import { Cart } from "@app/shared/components/cart/cart";
import { CartModel } from "@app/core/models/cart.model";
import { map } from "rxjs";
import { AsyncPipe } from "@angular/common";

@Component({
  selector: "app-header",
  imports: [LucideAngularModule, Cart, AsyncPipe],
  templateUrl: "./header.html",
  styleUrl: "./header.css",
})
export class Header {
  readonly UserIcon = User;
  readonly CartIcon = ShoppingCart;
  readonly SearchIcon = Search;
  readonly authService = inject(AuthService);
  readonly cartService = inject(CartService);
  protected readonly AuthState = AuthState;

  cartItems$ = this.cartService.cartItems$;
  cartItemCount = this.cartItems$.pipe(map((cart: CartModel) => cart.itemsCount ?? 0));
}