import Logo from "@/components/general/Logo";
import Stack from "@/components/lib/layout/Stack";
import { PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";
import { SocialLinks } from "./(data)/links";
import SocialLink from "./(partials)/SocialLink";

type Props = {};

export default function Aside({}: Props) {
    return (
        <aside
            className={twMerge(
                "max-w-[100px] border-0 border-r max-h-[100vh]",
                "border-white/10 border-solid flex flex-col",
                "items-start hidden md:flex sticky top-0"
            )}
        >
            <div
                className={twMerge(
                    "px-6 py-4 h-[var(--header-height)] border-0",
                    "border-b border-white/10"
                )}
            >
                <Logo size={28} />
            </div>
            <Stack className="items-center w-full py-6 mt-auto">
                {SocialLinks.map((link, index) => {
                    return <SocialLink key={index} link={link} />;
                })}
            </Stack>
            <div
                className={twMerge(
                    "px-6 py-4 h-[var(--header-height)] border-0",
                    "border-t border-white/10 w-full"
                )}
            ></div>
        </aside>
    );
}