"use client";

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

interface UserData {
  uuid: string;
  name: string;
  email: string;
  isd_code?: string | null;
  mobile?: string | null;
  locale?: string;
  profile_photo?: string | null;
  role?: {
    uuid: string | null;
    name: string | null;
  } | null;
}

interface IndividualHeaderWrapperProps {
  user?: UserData;
  onEditProfile: () => void;
  onChangePassword: () => void;
  onSupport: () => void;
  onLogout: () => void;
}

function HeaderFallback() {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100">
      <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 IndividualHeaderWrapper(props: IndividualHeaderWrapperProps) {
  return (
    <Suspense fallback={<HeaderFallback />}>
      <IndividualHeader {...props} />
    </Suspense>
  );
}