'use client';

import Link from 'next/link';
import { LogOut, User } from 'lucide-react';
import type { AuthUser } from '@vihar/shared';
import { useLogout } from '@/lib/auth';
import { Button } from '@/components/ui/button';

export function AppHeader({ user, role }: { user: AuthUser; role: 'captain' | 'volunteer' }) {
  const logout = useLogout();

  return (
    <header className="sticky top-0 z-30 bg-paper/85 backdrop-blur-md border-b border-ink-100">
      <div className="container max-w-2xl flex items-center justify-between h-14">
        <Link href={`/${role}`} className="flex items-center gap-2">
          <span className="font-display text-xl tracking-tight text-ink leading-none">
            Vihar Sewa
          </span>
          <span className="hidden sm:inline-block saffron-rule" />
          <span
            className={
              role === 'captain'
                ? 'text-[10px] uppercase tracking-widest text-saffron-700 font-medium'
                : 'text-[10px] uppercase tracking-widest text-moss-700 font-medium'
            }
          >
            {role === 'captain' ? 'Captain' : 'Sevak'}
          </span>
        </Link>

        <div className="flex items-center gap-1">
          <Link href={`/${role}/profile`}>
            <Button variant="ghost" size="icon" aria-label="Profile">
              <User className="w-4 h-4" />
            </Button>
          </Link>
          <Button
            variant="ghost"
            size="icon"
            aria-label="Sign out"
            onClick={() => logout.mutate()}
            disabled={logout.isPending}
          >
            <LogOut className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </header>
  );
}