<!--
    Component: Link
    A styled link component based on the footer link design.
    Supports optional icon snippet and standard anchor attributes.
-->
<script lang="ts">
import { cn } from '$shared/lib';
import type { Snippet } from 'svelte';
import type { HTMLAnchorAttributes } from 'svelte/elements';

interface Props extends HTMLAnchorAttributes {
    /**
     * Link content
     */
    children?: Snippet;
    /**
     * Optional icon snippet
     */
    icon?: Snippet;
    /**
     * CSS classes
     */
    class?: string;
}

let {
    children,
    icon,
    class: className,
    ...rest
}: Props = $props();
</script>

<a
    class={cn(
        'group inline-flex items-center gap-1 text-2xs font-mono uppercase tracking-wider-mono',
        'text-neutral-400 hover:text-brand transition-colors',
        'bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 pointer-events-auto',
        className,
    )}
    {...rest}
>
    {@render children?.()}
    {@render icon?.()}
</a>
