---
import { env } from 'cloudflare:workers';
import { getSession, type SessionEnv } from '../lib/session.js';

const cfEnv = env as SessionEnv | undefined;
const session = cfEnv ? await getSession(cfEnv, Astro.cookies) : null;

const { cartCount = 0 } = Astro.props;
---

<header class="border-b border-slate-200 bg-white">
  <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
    <a href="/" class="text-lg font-semibold text-slate-900">Store</a>
    <nav class="flex flex-wrap items-center gap-4 text-sm font-medium text-slate-700">
      <a href="/products" class="hover:text-slate-900">Products</a>
      <a href="/search" class="hover:text-slate-900">Search</a>
      <a href="/cart" class="relative hover:text-slate-900">
        Cart
        {cartCount > 0 && (
          <span class="ml-1 inline-flex min-w-5 items-center justify-center rounded-full bg-slate-900 px-1.5 py-0.5 text-xs text-white">
            {cartCount}
          </span>
        )}
      </a>
      {session ? (
        <a href="/account" class="hover:text-slate-900">Account</a>
      ) : (
        <a href="/login" class="hover:text-slate-900">Login</a>
      )}
    </nav>
  </div>
</header>