<script setup lang="ts">
import { usePage } from '@inertiajs/vue3';
import AppLogoIcon from '@/components/AppLogoIcon.vue';

const page = usePage();
const name = page.props.name;
const logoUrl = page.props.branding?.logo_url;
</script>

<template>
    <div
        v-if="logoUrl"
        class="flex aspect-square size-8 items-center justify-center rounded-md"
    >
        <img :src="logoUrl" :alt="name" class="size-8 rounded-md object-contain" />
    </div>
    <div
        v-else
        class="flex aspect-square size-8 items-center justify-center rounded-md text-white"
        style="background: #1877F2"
    >
        <AppLogoIcon class="size-5 fill-current text-white" />
    </div>
    <div class="ml-1 grid flex-1 text-left text-sm">
        <span class="mb-0.5 truncate leading-tight font-semibold">{{
            name
        }}</span>
    </div>
</template>
