<template>
	<v-skeleton-loader
		v-if="loading"
		class="overflow-hidden"
		max-height="100px"
		max-width="150px"
		type="image"
	/>

	<v-row align="center">
		<v-img :src="config.logo" max-width="100px" />
		<h1 class="ml-4">{{ config.title }}</h1>
	</v-row>
</template>

<script setup>
const { onMounted, ref } = Vue;

const config = ref({ logo: "", title: "" });
const loading = ref(false);

onMounted(async () => await load());

const load = async () => {
	try {
		loading.value = true;
		const { data } = await axios.get(
			`/${window.env.sas_api_token}/show_by_token`,
		);
		config.value.logo = data.data.vendor_group_wordpress_config.logo ?? "";
		config.value.title = data.data.title ?? "";
	} catch (e) {
		console.error(e);
	} finally {
		loading.value = false;
	}
};
</script>
