import {Burger, Container, Group, Image} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import classes from './BarkHeader.module.css';
import {NavLink} from "react-router";
import BarkLogo from '@/assets/barklogo.png';


const links = [
    { link: '/', label: 'Home' },
    { link: '/customers', label: 'Customers' },
    { link: '/jobs', label: 'Jobs' },
    { link: '/inventory', label: 'Inventory' },
];

export function BarkHeader() {
    const [opened, { toggle }] = useDisclosure(false);

    const items = links.map((link) => (
        <NavLink
            key={link.label}
            className = {({ isActive }) =>
                classes.link + ' ' + (isActive ? classes.active : '')} to={link.link} >
            {link.label}
        </NavLink>
    ));

    return (
        <header className={classes.header}>
            <Container fluid className={classes.inner}>
                <Image ml="lg" src={BarkLogo} h={55} w={55}/>
                <Group gap={5} visibleFrom="xs">
                    {items}
                </Group>

                <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
            </Container>
        </header>
    );
}