"use client";

import { Suspense } from "react";
import DashboardHeader from "./DashboardHeader";

interface DashboardHeaderWrapperProps {
  onEditProfile: () => void;
  onChangePassword: () => void;
  onSupport: () => void;
  onLogout: () => void;
  hasActiveSubscription: boolean;
}

function HeaderFallback() {
  return (
    <header className="bg-white border-b border-gray-100 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="animate-pulse flex items-center gap-2">
            <div className="w-10 h-10 bg-gray-200 rounded-lg"></div>
            <div className="w-20 h-6 bg-gray-200 rounded"></div>
          </div>
          <div className="animate-pulse flex items-center gap-4">
            <div className="w-16 h-8 bg-gray-200 rounded-lg"></div>
            <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
          </div>
        </div>
      </div>
    </header>
  );
}

export default function DashboardHeaderWrapper(props: DashboardHeaderWrapperProps) {
  return (
    <Suspense fallback={<HeaderFallback />}>
      <DashboardHeader {...props} />
    </Suspense>
  );
}