---
import { Picture, getImage } from "astro:assets";
import pfp from "../img/sites/avatar.png";
import Partition from "./Partition.astro";

import myBackground from "../img/sites/avatar-ht-f.png";

const optimizedBackground = await getImage({
	src: myBackground,
	format: "avif",
	quality: 50,
	width: 680,
});
const optimizedBackgroundLQ = await getImage({
	src: myBackground,
	format: "jpeg",
	quality: 60,
	width: 680,
});
---
<style is:inline>
    image-set(
        url("image1.avif") type("image/avif"),
        url("image2.jpg") type("image/jpeg")
    );
</style>
<div
    style={`width: 670px; border: 1px solid var(--border); background-image: image-set(url('${optimizedBackground.src}') type("image/avif"), url('/static/img/sites/avatar-ht-f.webp') type("image/webp"), url('${optimizedBackgroundLQ.src}') type("image/jpeg"));`}
    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
    >
    <Picture
        src={pfp}
        class="size-40 rounded-full shadow shadow-black m-4"
        width={320}
        height={320}
        quality={70}
        formats={['avif', 'webp', 'jpeg']}
        alt="Arias's profile picture"
    />
    <div
        class="flex-row p-3 gap-4 text-center text-3xl"
    >
        <h2 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2 mb-1">Aria (Aka: Mojo)</h2>
        <h3 class="backdrop-brightness-50 backdrop-blur rounded-lg px-2 pb-1 pt-2">🏳️‍🌈 🏳️‍⚧️ • she/her</h3>
    </div>
</div>
<Partition>
    <a href="/" class="nav-btn">Home</a> |
    <a href="/blog" class="nav-btn">Blog</a> |
    <a href="/about" class="nav-btn">About</a> |
    <a href="/tags" class="nav-btn">Tags</a> |
    <a href="/friends" class="nav-btn">Friends</a> |
    <a href="/other buttons" class="nav-btn">Moar 88x31</a>
</Partition>
