"use client";

import { Button } from "@/components/Button";

export function AdminHeader({
  title,
  subtitle,
  adminName,
  onLogout,
  isLoggingOut,
  onOpenNav,
}: {
  title: string;
  subtitle?: string;
  adminName: string;
  onLogout: () => void;
  isLoggingOut: boolean;
  onOpenNav: () => void;
}) {
  return (
    <header className="flex h-dashboard-header shrink-0 items-center justify-between gap-3 border-b border-line/80 bg-[#F7F8FA]/95 px-4 backdrop-blur-sm lg:px-6">
      <div className="flex min-w-0 items-center gap-3">
        <button
          type="button"
          className="inline-flex size-9 shrink-0 items-center justify-center rounded-[10px] border border-line/80 bg-surface text-primary shadow-pv transition hover:border-primary lg:hidden"
          onClick={onOpenNav}
          aria-label="Open navigation"
        >
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth="1.5"
            stroke="currentColor"
            width="18"
            height="18"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
            />
          </svg>
        </button>
        <div className="min-w-0">
          <h1 className="truncate text-[1.0625rem] font-semibold tracking-[-0.02em] text-primary sm:text-[1.125rem]">
            {title}
          </h1>
          {subtitle ? (
            <p className="truncate text-[0.75rem] text-ink-40">{subtitle}</p>
          ) : null}
        </div>
      </div>
      <div className="flex shrink-0 items-center gap-2.5 sm:gap-3">
        <div className="hidden min-w-0 text-right sm:block">
          <p className="truncate text-[0.8125rem] font-medium text-primary">{adminName}</p>
          <p className="text-[0.6875rem] text-ink-40">Admin</p>
        </div>
        <Button type="button" variant="secondary" size="sm" onClick={onLogout} disabled={isLoggingOut}>
          {isLoggingOut ? "Signing out…" : "Sign out"}
        </Button>
      </div>
    </header>
  );
}