<script setup lang='ts'>
defineProps<{
  icon?: string
  title: string
}>()


const itemRef = shallowRef<HTMLElement | undefined>()
function select() {
  itemRef.value?.classList.add('selected', 'bg-hex-1E6EFD')
}
function unselect() {
  itemRef.value?.classList.remove('selected', 'bg-hex-1E6EFD')
}

defineExpose({
  select,
  unselect
})

</script>

<template>
  <div ref="itemRef"
    class=" flex flex-col items-center justify-around w-72px h-72px cursor-pointer hover:bg-hex-39393a rounded-10px">
    <div class="w-26px h-26px">
      <img v-if="icon" :src="icon" w-full h-full>
    </div>
    <div class="text-xs tracking-wider">{{ title }}</div>
  </div>
</template>
