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

import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
import UserAvatarMenu from "./UserAvatarMenu.jsx";
import { NavLink } from "react-router-dom";

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

// TODO: Pull this dynamically from an Auth Context later!
const placeholderUser = {
    name: "Princess Zelda",
    email: "zelda.royal@hyrule.gov",
    // avatar: defaultAvatar
}

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

    return (
        <Flex css={styles} justify="space-between" align="center" width="100%">
            {/* Home Link Logo */}
            <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
                VDAP
            </Button>

            {/* User Profile Section */}
            <Flex align="center" gap={3} pr={6}>
                <Stack gap="0" textAlign="right" cursor="default">
                    <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
                    <Text color="fg.muted" textStyle="sm">{user.email}</Text>
                </Stack>
                <UserAvatarMenu
                    name={user.name}
                    avatar={user.avatar}
                />
            </Flex>
        </Flex>
    );
}