"use client";

import type { ReactNode } from "react";
import { usePathname } from "next/navigation";
import { Typography } from "antd";

import { adminPageHeading } from "./admin-shell-utils";

type AdminHeaderProps = {
  /** Right-side slot (optional; can be passed from `AdminLayout` when available). */
  actions?: ReactNode;
};

export function AdminHeader({ actions }: AdminHeaderProps) {
  const pathname = usePathname() ?? "/dashboard";
  const { title, subtitle } = adminPageHeading(pathname);

  return (
    <header className="admin-shell-header sticky top-0 z-10 flex h-[4.25rem] shrink-0 items-stretch border-b border-slate-200/90 bg-white/85 px-5 shadow-[0_1px_0_rgba(255,255,255,0.85)_inset,0_8px_32px_-20px_rgba(15,23,42,0.07)] backdrop-blur-lg backdrop-saturate-150 transition-[background-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] md:px-7">
      <div className="flex w-full min-w-0 items-center justify-between gap-4">
        <div className="min-w-0 flex-1">
          <Typography.Title
            level={3}
            className="!mb-0 !truncate !text-[1.375rem] !font-bold !leading-tight !tracking-tight text-[#0c1222] md:!text-[1.625rem]"
          >
            {title}
          </Typography.Title>
          <Typography.Text className="mt-1 block truncate text-[12px] font-normal leading-snug text-slate-500 md:text-[13px]">
            {subtitle}
          </Typography.Text>
        </div>
        <div className="admin-header-actions flex shrink-0 items-center gap-2 [&_.ant-btn]:transition-all [&_.ant-btn]:duration-200 [&_.ant-btn]:ease-[cubic-bezier(0.22,1,0.36,1)]">
          {actions}
        </div>
      </div>
    </header>
  );
}