<script lang="ts" setup>

// types

type Props = {
    selectable?: boolean,
    selected?: boolean;
}

// props

withDefaults(defineProps<Props>(), {
    selectable: false
});

</script>

<template>
    <div
        class="size-[25px] rounded-full transition-all shadow-black/30 shadow-inner"
        :class="[selectable ? 'ring-2 ring-offset-4 ' : '', selected ? 'ring-blue-500' : 'ring-transparent']"
    />
</template>