---
import { Image } from "astro:assets";
import SocialLinks from "../components/SocialLinks.astro";
import TechLinks from "../components/TechLinks.astro";
import Layout from "../layouts/Layout.astro";
import { config } from "../config";
---

<Layout>
    <Image
        src={config.personalInfo.profileImage.src}
        alt={config.personalInfo.profileImage.alt}
        width={300}
        height={300}
        layout="constrained"
        priority={true}
        class="rounded-full mx-auto"
        style="max-width: 12rem; width: 100%;"
    />

    <h1 class="text-primary text-4xl sm:text-6xl font-bold text-center">
        {config.personalInfo.name}
    </h1>

    <h2 class="text-xl sm:text-3xl font-bold text-center mx-6">
        {config.personalInfo.tagline}
    </h2>

    {
        config.personalInfo.currentFocus && (
            <>
                <h3 class="text-lg sm:text-2xl font-bold">
                    {config.homepageSections.currentFocus.title}
                </h3>

                <div class="flex flex-wrap gap-2 justify-center mx-6">
                    {config.personalInfo.currentFocus.map((focus) => {
                        const badgeClass =
                            focus.style === "primary"
                                ? "badge badge-primary"
                                : focus.style === "secondary"
                                  ? "badge badge-secondary"
                                  : focus.style === "accent"
                                    ? "badge badge-accent"
                                    : focus.style === "neutral"
                                      ? "badge badge-neutral"
                                      : focus.style === "info"
                                        ? "badge badge-info"
                                        : focus.style === "success"
                                          ? "badge badge-success"
                                          : focus.style === "warning"
                                            ? "badge badge-warning"
                                            : focus.style === "error"
                                              ? "badge badge-error"
                                              : "badge";

                        return <span class={badgeClass}>{focus.label}</span>;
                    })}
                </div>
            </>
        )
    }

    <h3 class="text-lg sm:text-2xl font-bold">
        {config.homepageSections.socialLinks.title}
    </h3>

    <SocialLinks />

    <h3 class="text-lg sm:text-2xl font-bold">
        {config.homepageSections.techStack.title}
    </h3>

    <TechLinks />
</Layout>