"use client";
import NextLink from "next/link";
import {
    Flex,
        Box,
        HStack,
        Link,
        Image,
        Spacer,
        IconButton,
        ClientOnly,
        Skeleton
} from "@chakra-ui/react";
import { FaCircleUser } from "react-icons/fa6";
import { useColorMode } from "@/components/ui/color-mode"
import { LuMoon, LuSun } from "react-icons/lu"
import styles from "./Header.module.css";
import {MENU_ITEMS} from "../lib/constants";

export default function Header() {
    const { toggleColorMode, colorMode } = useColorMode()
    return (
        <Box
            as="header"
            bg="white"
            boxShadow="sm"
            position="sticky"
            top={0}
            zIndex={10}
        >
            {/* First row: Logo + User menu */}
            <Flex
                px={8}
                py={2}
                align="center"
                justify="space-between"
                borderBottom="1px solid"
                borderColor="gray.100"
            >
                {/* Logo */}
                <Link as={NextLink} href="/" _hover={{ textDecoration: "none" }}>
                    <Image src="/logo.svg" alt="Logo" h="40px" />
                </Link>

                <Spacer />

                {/* User Menu */}
                <IconButton aria-label="Call support" rounded="full">
                    <FaCircleUser />
                </IconButton>
                <ClientOnly fallback={<Skeleton boxSize="8" />}>
                    <IconButton onClick={toggleColorMode} variant="outline" size="sm">
                        {colorMode === "light" ? <LuSun /> : <LuMoon />}
                    </IconButton>
                </ClientOnly>
            </Flex>

            {/* Second row: Navigation menu */}
            <Flex px={8} py={3} as="nav">
                <HStack spacing={6}>
                    {MENU_ITEMS.map((item) => (
                        <Link
                            key={item.href}
                            as={NextLink}
                            href={item.href}
                            fontWeight="medium"
                            _hover={{ color: "teal.500" }}
                            fontSize="md"
                        >
                            {item.label}
                        </Link>
                    ))}
                </HStack>
            </Flex>
        </Box>
    );
}