import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
import UserAvatarMenu from "./UserAvatarMenu.jsx";
import { NavLink } from "react-router-dom";
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 = useRecipe({ 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} 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>*/}
            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />

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