// src/components/navbar.js
import { useEffect, useState } from "react";
import {
    NavContainer,
    LinksContainer,
    ImageContainer,
    NavLink,
    Image
} from "../styles/components/navbar.styles";

import api from "../utils/api.js";

export default function Navbar() {
    const [navLinks, setNavLinks] = useState([]);

    useEffect(() => {
        api("/navlinks")
            .then(res => {
                console.log("RES", res);
                setNavLinks(res.data.navLinks);
            });
    }, []);

    const generateLinks = () => {
        return Object.keys(navLinks).map(link => (
            <NavLink key={link.id} to={link.path}>
                {link.name}
            </NavLink>
        ));
    };

    return (
        <NavContainer className="container-fluid">
            <LinksContainer className="container">
                { generateLinks() }
            </LinksContainer>

            <ImageContainer className="container">
                <Image src="/images/icon.png" alt="Navigation Icon" />
            </ImageContainer>
        </NavContainer>
    );
}