1
import { Flame, Inbox, Info, Shield } from "lucide-react";
2
import { Link, NavLink } from "react-router-dom";
3
 
4
interface HeaderProps {
5
  sessionCount?: number;
6
}
7
 
8
export function Header({ sessionCount = 0 }: HeaderProps) {
9
  return (
10
    <header className="sticky top-0 z-50 w-full border-b border-zinc-800/60 bg-zinc-900/95 backdrop-blur-sm">
11
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
12
        <Link to="/" className="group flex items-center gap-3 transition-opacity hover:opacity-80">
13
          <span className="inline-grid h-9 w-9 place-items-center">
14
            <Flame
15
              className="h-6 w-6 text-accent-400 transition-transform duration-200 group-hover:-rotate-6"
16
              strokeWidth={2}
17
              aria-hidden="true"
18
            />
19
          </span>
20
          <span className="hidden sm:block">
21
            <strong className="block text-sm font-semibold text-zinc-100">flamemail</strong>
22
            <small className="block text-xs text-zinc-400">Catch what your app sends</small>
23
          </span>
24
        </Link>
25
26
        <nav className="flex items-center gap-1" aria-label="Primary">
27
          {sessionCount > 0 ? (
28
            <span className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-zinc-400">
29
              <Inbox className="h-3.5 w-3.5" />
30
              <span className="text-xs">{sessionCount}</span>
31
            </span>
32
          ) : null}
33
          <NavLink
34
            to="/about"
35
            aria-label="About"
36
            className={({ isActive }) =>
37
              `flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
38
                isActive ? "bg-accent-500/10 text-accent-400" : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
39
              }`
40
            }
41
          >
42
            <Info className="h-3.5 w-3.5" />
43
            <span>About</span>
44
          </NavLink>
45
          <NavLink
46
            to="/admin"
47
            aria-label="Admin"
48
            className={({ isActive }) =>
49
              `flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
50
                isActive ? "bg-accent-500/10 text-accent-400" : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
51
              }`
52
            }
53
          >
54
            <Shield className="h-3.5 w-3.5" />
55
            <span>Admin</span>
56
          </NavLink>
57
        </nav>
58
      </div>
59
    </header>
60
  );
61
}