"use client";

import Link from "next/link";
import { memo } from "react";
import { Bars3Icon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";

interface HeaderProps {
  onMenuClick: () => void;
  user: { firstName?: string | null; lastName?: string | null; email?: string | null } | null;
  profileReady: boolean;
}

export const Header = memo(function Header({ onMenuClick, user, profileReady }: HeaderProps) {
  const displayName = profileReady
    ? [user?.firstName, user?.lastName].filter(Boolean).join(" ") ||
      user?.email?.split("@")[0] ||
      "Account"
    : user?.email?.split("@")[0] || "Account";

  return (
    <div className="bg-[var(--cp-header-bg)] border-b border-[var(--cp-header-border)] backdrop-blur-sm">
      <div className="flex items-center h-16 gap-3 px-4 sm:px-6">
        <button
          type="button"
          className="md:hidden p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20"
          onClick={onMenuClick}
          aria-label="Open navigation"
        >
          <Bars3Icon className="h-6 w-6" />
        </button>

        <div className="flex-1" />

        <div className="flex items-center gap-2">
          <Link
            href="/support/kb"
            prefetch
            aria-label="Help"
            className="hidden sm:inline-flex p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors"
            title="Help Center"
          >
            <QuestionMarkCircleIcon className="h-5 w-5" />
          </Link>

          <Link
            href="/account"
            prefetch
            className="hidden sm:inline-flex items-center px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
          >
            {displayName}
          </Link>
        </div>
      </div>
    </div>
  );
});
