'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Button } from '@the-order/ui';
import { useAuth } from '../lib/auth';

export function Header(): JSX.Element {
  const router = useRouter();
  const { isAuthenticated, user, logout } = useAuth();

  const handleLogout = (): void => {
    logout();
    router.push('/login');
  };

  return (
    <header className="border-b bg-white">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="text-2xl font-bold text-gray-900">
            The Order - Internal
          </Link>
          <nav className="flex items-center gap-4">
            <Link href="/review" className="text-gray-600 hover:text-gray-900">
              Review
            </Link>
            <Link href="/credentials" className="text-gray-600 hover:text-gray-900">
              Credentials
            </Link>
            <Link href="/metrics" className="text-gray-600 hover:text-gray-900">
              Metrics
            </Link>
            <Link href="/audit" className="text-gray-600 hover:text-gray-900">
              Audit
            </Link>
            {isAuthenticated ? (
              <div className="flex items-center gap-4">
                <span className="text-sm text-gray-600">{user?.email || user?.name || 'Admin'}</span>
                <Button variant="outline" size="sm" onClick={handleLogout}>
                  Logout
                </Button>
              </div>
            ) : (
              <Link href="/login">
                <Button variant="outline" size="sm">Login</Button>
              </Link>
            )}
          </nav>
        </div>
      </div>
    </header>
  );
}
