<script lang="ts">
	import type { Footer } from '$lib/types/data';
	import { Github, Linkedin } from '@lucide/svelte';

	let { links, copyright }: Footer = $props();
</script>

<footer>
	<ul>
		{#if (links.linkedin)}
			<li>
				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
				<a href={links.linkedin} target="_blank">
					<span class="icon">
						<Linkedin class="icon" />
					</span>
				</a>
			</li>
		{/if}
		{#if (links.git)}
			<li>
				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
				<a href={links.git} target="_blank">
					<span class="icon">
						<Github class="icon" />
					</span>
				</a>
			</li>
		{/if}
	</ul>
	<div>{copyright}</div>
</footer>

<style>
    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;

        margin-top: 5rem;
        padding: 2rem;

        background-color: var(--color-footer-background);
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        margin: unset;
        padding: unset;
        list-style: none;

        @media (min-width: 768px) {
            gap: 2rem;
        }
    }

    li {
        display: contents;
    }

    a {
        padding: 0.5rem;
        text-decoration: none;
        color: var(--color-text-primary);

        &:hover {
            color: var(--color-header-hover);
        }

        &:visited:not(:hover) {
            color: var(--color-text-primary);
        }
    }

    .icon {
        font-size: 1.5rem;
    }

    div {
        font-size: 0.875rem;
        color: var(--color-text-tertiary);
        text-align: center;
    }
</style>