<script lang="ts">
    type links = {
        destination: string;
        name: string;
        image: string;
    }
    const navlinks: Array<links> = [
        {
			destination: "/",
			name: "home",
			image: ""
		},
        // {
		// 	destination: "/about",
		// 	name: "about",
		// 	image: ""
		// },
        {
			destination: "/pets",
			name: "pets",
			image: ""
		},
        {
			destination: "/links",
			name: "links",
			image: ""
		},
        {
			destination: "/portfolio",
			name: "projects",
			image: ""
		}
    ]
</script>

<nav>
  {#each navlinks as links}
    <a href="{links.destination}" class="link">
        <img class="noselect" src="{links.image}" alt="">
        <p>{links.name}</p>
    </a>
  {/each}
</nav>

<style lang="scss">
    @use '$lib/styles/variables' as vars;
    nav {
        display: flex;
        justify-content: space-evenly;
    }
    .link {
        display: flex;
        flex-direction: column;
        img {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        p {
            text-align: center;
        }
        &:hover {
            p {
                color: vars.$highlight;
            }
            img {
                border: 2px solid vars.$highlight;
                box-sizing: border-box;
            }
        }
    }
    a {
        color: white;
        text-decoration: none;
    }
</style>