---
import { Icon } from "astro-icon/components";
import { cn } from "~/lib/utils";

interface Props {
    minimal?: boolean;
}

const { minimal = false } = Astro.props;

const currentPath = Astro.url.pathname;

const socialLinks = [
    {
        name: "GitHub",
        url: "https://github.com/t128n",
        icon: "simple-icons:github",
    },
    {
        name: "LinkedIn",
        url: "https://www.linkedin.com/in/torben-haack/",
        icon: "simple-icons:linkedin",
    },
];
---

<header
    class={cn({
        "py-6 border-b border-ink/10": minimal,
        "py-16": !minimal,
    })}
>
    <div class="container flex flex-row items-baseline justify-between">
        <a href="/" class="group">
            {
                minimal ? (
                    <div class="flex items-baseline gap-3">
                        <div>
                            <h1 class="font-display font-bold text-xl group-hover:opacity-70 transition-opacity">
                                torben haack
                            </h1>
                        </div>
                    </div>
                ) : (
                    <>
                        <h1 class="font-display font-bold text-4xl">
                            torben haack
                        </h1>
                        <p class="font-serif">[ˈtɔʁbn̩ haːk]</p>
                    </>
                )
            }
        </a>
        <nav>
            <ul class="flex flex-row gap-4 list-none m-0 p-0">
                {
                    socialLinks.map((link) => (
                        <li>
                            <a
                                href={link.url}
                                aria-label={link.name}
                                target="_blank"
                                rel="noopener noreferrer"
                                class="opacity-60 hover:opacity-100 transition-opacity"
                            >
                                <Icon
                                    name={link.icon}
                                    class={
                                        minimal
                                            ? "inline-block w-5 h-5"
                                            : "inline-block w-6 h-6"
                                    }
                                />
                                <span class="sr-only">{link.name}</span>
                            </a>
                        </li>
                    ))
                }
            </ul>
        </nav>
    </div>
</header>