<template>
    <div>
        <span
            v-if="photoUrl == ''"
            class="inline-block rounded-full overflow-hidden bg-gray-100"
            :style="'height:' + photoSize + 'rem; width:' + photoSize + 'rem'"
        >
            <svg
                class="h-full w-full text-gray-300"
                fill="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
                ></path>
            </svg>
        </span>
        <img
            v-else
            class="'inline-block rounded-full border'"
            :style="'height:' + photoSize + 'rem; width:' + photoSize + 'rem'"
            :src="photoUrl"
            :alt="imageAlt"
        />
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    imageSize: { type: Number, default: 12 },
    imageAlt: { type: String, default: '' },
    imageUrl: { type: String, default: '' },
});

const photoSize = ref(props.imageSize);
const photoUrl = ref(props.imageUrl);
const imageAlt = ref(props.imageAlt);
</script>

<style lang="css" scoped></style>
