<script lang="ts">
    export let persons: Page[]
    let boxes = persons.map((p) => p.personPreview.name)
    const sortByFirstName = (a, b) => {
        const nameA = a?.split(" ")[0] // Extracts the first name from "First Last"
        const nameB = b?.split(" ")[0]
        console.log("nameA", nameA, "nameB", nameB, "comp", nameA?.localeCompare(nameB))
        return nameA?.localeCompare(nameB)
    }
    boxes = boxes.sort(sortByFirstName)
    $: console.log(boxes, "boxes", persons)
</script>

<div class="boxList">
    {#each boxes as name}
        <div class="box">
            {name}
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";

    .boxList {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        .box {
            padding: 5px 10px;
            background-color: @signal-color;
            color: @font-color-secondary;
            font-weight: bold;
        }
    }
</style>
