<script>
    import "$lib/css/person.css";
    import Button from "$lib/components/button.svelte";

    import hubjson from "$lib/json/hub.json";

    export let picture;
    export let name = "John Doe";
    export let pronouns = "";
    export let description = "Normal human being I swear";
    export let url = "https://github.com";
</script>

<div class="flex center">
    <div class="person-container flex-row">
        <div class="person-picture">
            <img alt="person" src={picture} />
        </div>
        <div class="person-content flex-col">
            <div class="person-span flex-row">
                <h1>{name}</h1>
                {#if pronouns != ""}
                    <span>{pronouns}</span>
                {/if}
            </div>
            <p>{description}</p>
            <div class="flex-row flex-end">
                <Button
                    label={hubjson.person.knowme}
                    action={() => {
                        window.location.href = url;
                    }}
                />
            </div>
        </div>
    </div>
</div>
