<script lang="ts">
    import { type Room } from "$lib/types"
    let { room }: { room: Room } = $props()
</script>

<a
    class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
    href="/room/{room.id}"
>
    <div class="flex flex-row">
        {room.name}
        {room.private ? "🔒" : ""}
    </div>
    <div class="grow"></div>
    <div class="flex flex-row items-center gap-2">
        <div class="font-mono">{Math.round(room.distance)}m</div>
        <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
    </div>
</a>
