import { useAuth } from "../../contexts/AuthContext";

export default function Topbar() {
  const { user } = useAuth();

  // Generate initials from user's name with null safety
  const getInitials = (firstname?: string, lastname?: string) => {
    const first = firstname?.charAt(0)?.toUpperCase() || "";
    const last = lastname?.charAt(0)?.toUpperCase() || "";
    return first + last || "U";
  };

  return (
    <header className="bg-white border-b border-gray-200">
      <div className="flex justify-end items-center px-6 py-[14px]">
        {/* Right side user info */}
        <div className="flex items-center space-x-4">
          {/* Notification icon */}
          <button className="text-gray-500 hover:text-gray-700">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>
          </button>

          {/* User avatar */}
          <div className="flex items-center">
            <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
              {user ? getInitials(user.firstname, user.lastname) : "U"}
            </div>
            <div className="ml-2">
              <p className="text-sm font-medium text-gray-700">
                {user
                  ? `${user.firstname || ""} ${user.lastname || ""}`.trim() ||
                    "User"
                  : "Loading..."}
              </p>
              <p className="text-xs text-gray-500">{user ? user.email : ""}</p>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}