"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Header = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const icons_1 = require("@chakra-ui/icons");
/**
 * Header component using Chakra UI components with BFUI theme customizations
 */
const Header = ({ logo, links = [], userProfile, onLogout, ...rest }) => {
    const { isOpen, onToggle } = (0, react_1.useDisclosure)();
    const bg = (0, react_1.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_1.useColorModeValue)('gray.200', 'gray.700');
    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "header", bg: bg, borderBottom: "1px", borderColor: borderColor, position: "fixed", top: 0, width: "full", zIndex: "sticky", ...rest, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", mx: "auto", px: 4, py: 2, maxW: "container.xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", children: logo }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { display: { base: 'flex', md: 'none' }, onClick: onToggle, icon: (0, jsx_runtime_1.jsx)(icons_1.HamburgerIcon, { w: 5, h: 5 }), variant: "ghost", "aria-label": "Toggle Navigation", mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Stack, { direction: { base: 'column', md: 'row' }, display: { base: isOpen ? 'flex' : 'none', md: 'flex' }, width: { base: 'full', md: 'auto' }, alignItems: "center", spacing: 4, mt: { base: 4, md: 0 }, children: links.map((link, index) => ((0, jsx_runtime_1.jsx)(react_1.Link, { href: link.href, px: 2, py: 1, rounded: "md", _hover: {
                            textDecoration: 'none',
                            bg: (0, react_1.useColorModeValue)('gray.100', 'gray.700'),
                        }, bg: link.active ? (0, react_1.useColorModeValue)('gray.100', 'gray.700') : 'transparent', children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, children: [link.icon, (0, jsx_runtime_1.jsx)(react_1.Text, { children: link.label })] }) }, index))) }), userProfile && ((0, jsx_runtime_1.jsx)(react_1.Box, { ml: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, variant: "ghost", rightIcon: (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIcon, {}), _hover: { bg: (0, react_1.useColorModeValue)('gray.100', 'gray.700') }, children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userProfile.name, src: userProfile.avatar || '' }), (0, jsx_runtime_1.jsxs)(react_1.VStack, { display: { base: 'none', md: 'flex' }, alignItems: "flex-start", spacing: "1px", ml: "2", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: userProfile.name }), userProfile.role && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: "gray.600", children: userProfile.role }))] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuItem, { children: "Profile" }), (0, jsx_runtime_1.jsx)(react_1.MenuItem, { children: "Settings" }), onLogout && (0, jsx_runtime_1.jsx)(react_1.MenuItem, { onClick: onLogout, children: "Logout" })] })] }) }))] }) }));
};
exports.Header = Header;
exports.default = exports.Header;
//# sourceMappingURL=Header.js.map