"use client";

import { useAuthStore } from "@/store/auth-store";
import { useMounted } from "@/hooks/use-mounted";

interface PageHeaderProps {
  title: string;
  subtitle?: string;
}

export function PageHeader({ title, subtitle }: PageHeaderProps) {
  const user = useAuthStore((s) => s.user);
  const mounted = useMounted();

  const displayName = mounted && user?.name ? user.name : "Sarah Mitchell";
  const initials = mounted && user?.initials ? user.initials : "SM";

  return (
    <header className="flex shrink-0 flex-col gap-4 px-4 pb-2 pt-6 sm:flex-row sm:items-start sm:justify-between sm:px-6 sm:pt-8 lg:px-8">
      <div className="min-w-0 flex-1">
        <h1 className="text-2xl font-bold leading-tight tracking-tight text-gray-900 sm:text-[1.75rem]">
          {title}
        </h1>
        {subtitle && <p className="mt-1.5 text-sm text-gray-500">{subtitle}</p>}
      </div>
      <div className="flex shrink-0 items-center gap-3 sm:pt-1">
        <span className="text-sm font-medium text-gray-700" suppressHydrationWarning>
          {displayName}
        </span>
        <div
          className="flex h-9 w-9 items-center justify-center rounded-full bg-brand-600 text-sm font-semibold text-white"
          suppressHydrationWarning
        >
          {initials}
        </div>
      </div>
    </header>
  );
}