<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">
					<Linkedin class="icon" />
				</a>
			</li>
		{/if}
		{#if (links.git)}
			<li>
				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
				<a href={links.git} target="_blank">
					<Github class="icon" />
				</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;

				&:visited {
						color: inherit;
				}
    }

		.icon {
				width: 1em;
				height: 1em;
		}

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