Web-Frontend/client/src/components/layout/Header.jsx

import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
import UserAvatarMenu from "./UserAvatarMenu.jsx";
import useAuthStore from "@/store/authStore";
import {SearchBar} from "@/components/dashboard/SearchBar.jsx";

// Import the asset properly so Vite can bundle it for any server
// import defaultAvatar from "@/assets/user_profile.svg";

// Accept a 'user' prop now, fallback to placeholder if empty
export default function Header() {
  const recipe = useSlotRecipe({key: "header"});
  const styles = recipe();

  const {user} = useAuthStore();
  console.log(user);
  const displayName = user ? (user.firstName || user.username) : "Loading...";
  const avatarname = user ? (user.fullName || user.username) : "Loading...";

  const displayEmail = user?.email || "LDAP User";

  return (
    <Flex css={styles.root}>
      <Flex css={styles.search_bar}>
       <SearchBar placeholder="Enter a volcano to search"/>
      </Flex>

      {/* User Profile Section */}
      <Flex css={styles.user_info}>
        <Text>{displayName}</Text>
        <UserAvatarMenu
          name={avatarname}
          // avatar={user.avatar}
        />
      </Flex>
    </Flex>
  );
}