---
import Terminal from "../layouts/Layout.astro";
import TerminalBorder from "../components/TerminalBorder.astro";
import Link from "../components/Link.astro";

const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
const fingerprint = `
+--[ED25519 256]--+
|+o.+oE*B%* o     |
|o=...+++=.+ +    |
|o B . o. . o +   |
|.+ + o .    =    |
|. + .   S  o +   |
| . o      . +    |
|. .        .     |
|..               |
|.                |
+----[SHA256]-----+`.trimStart();

const aboutMe = `
Hi! I'm Kyren, a software engineer and Minecraft plugin freelancer,
I love working with Rust, Golang and Java.
I am also a terminal nerd and linux enthusiast who uses NVIM btw.
And when I am not coding I am most likely playing video games,
watching Anime or solving Rubik's cubes fast.`.trimStart();
---

<Terminal dir="">
    <div id="content">
        <div id="left" class="column">
            <TerminalBorder header="Profile">
                <div class="flex items-center space-x-3">
                    <img
                        src="logo.svg"
                        alt="picture"
                        class="h-[100%] object-cover"
                    />
                    <pre
                        id="sshKeyCopy"
                        class="text-[75%] flex-1">{fingerprint}</pre>
                </div>
            </TerminalBorder>
            <TerminalBorder header="Name">
                <span>Kyren</span>
            </TerminalBorder>
            <TerminalBorder header="Email">
                <span>Kyren223@proton.me</span>
            </TerminalBorder>
            <TerminalBorder header="Timezone">
                <span>UTC+2</span>
            </TerminalBorder>
            <div class="w-[334%]">
                <TerminalBorder header="SSH Key">
                    <div
                        class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
                    >
                        <span
                            id="sshKey"
                            class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
                            >{sshKey}</span
                        >
                        <button
                            id="sshKeyCopy"
                            class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
                        >
                            <svg
                                width="100%"
                                height="100%"
                                viewBox="0 -3 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                            >
                                <path
                                    fill="currentColor"
                                    fill-rule="evenodd"
                                    d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
                                ></path>
                            </svg>
                        </button>
                    </div>
                </TerminalBorder>
            </div>
        </div>
        <div id="right" class="column">
            <TerminalBorder header="Status">
                <p>
                    Working on
                    <Link href="https://github.com/KapiMC/Kapi">Kapi </Link>
                    | Learning Web Development | Available for hire
                </p>
            </TerminalBorder>
            <TerminalBorder header="About Me" margin="20px 0">
                <p>{aboutMe}</p>
            </TerminalBorder>
            <TerminalBorder header="Links">
                <p>
                    <Link href="https://github.com/Kyren223"
                        >github.com/Kyren223</Link
                    >
                    <br />
                    <Link href="https://discord.com/users/481884415090229258"
                        >discord.com/Kyren223</Link
                    >
                </p>
            </TerminalBorder>
        </div>
    </div>
</Terminal>

<script>
    const sshKey = document.getElementById("sshKey")?.innerHTML;
    function copySshKeyToClipboard() {
        navigator.clipboard
            .writeText(sshKey ? sshKey : "")
            .then(() => {
                // TODO: show some feedback for copying
            })
            .catch((_err) => {
                // TODO: show same feedback but with err
            });
    }

    document
        .getElementById("sshKey")
        ?.addEventListener("click", copySshKeyToClipboard);
    document
        .getElementById("sshKeyCopy")
        ?.addEventListener("click", copySshKeyToClipboard);
</script>

<style>
    #content {
        margin-top: 0.5rem;
        display: flex;
        justify-content: space-between; /* Removing this makes a cool effect of the right side being "attached" to the left */
    }

    #left {
        width: 30%;
    }
    #right {
        width: 67%;
    }

    .column {
        /* border-style: solid; */
        border-width: 1px;
        border-color: var(--alt);
    }

    button {
        background-color: var(--background);
        color: var(--text);
        border: 0;
        font-size: 1rem;
        cursor: pointer;
        width: 20px;
        height: 20px;
        padding: 0;
        line-height: 30px;
        font-size: 16px;
    }
</style>