<template>
  <div
    :class="[
      selected && multiple
        ? [
            'wrapper rounded-full px-1 py-1 shadow-md ring-1 ring-black ring-opacity-5',
          ]
        : '',
      'flex flex-row items-center',
    ]"
  >
    <button
      :class="[
        selected && !multiple ? ' bg-purple-400 hover:bg-purple-300' : '',
        selected && multiple ? ' bg-purple-500 hover:bg-purple-400' : '',
        !selected ? 'hover:bg-gray-100' : '',
        'flex h-12 w-12 items-center justify-center rounded-full shadow-md ring-1 ring-black ring-opacity-5',
      ]"
    >
      <component :is="icon" class="h-8 w-8" />
    </button>
    <Transition
      enter-active-class="transition ease-out duration-200"
      enter-from-class="opacity-0 translate-y-1"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition ease-in duration-150"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 translate-y-1"
    >
      <div v-if="selected && multiple" class="flex flex-row space-x-1">
        <div class="ml-1 mr-1 h-12 w-1 border-r-2 border-gray-100"></div>

        <slot />
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import type { Component } from 'vue';

const props = defineProps<{
  icon: Component;
  multiple?: boolean;
  selected?: boolean;
}>();

const emit = defineEmits();
</script>

<style scoped lang="scss">
.wrapper {
  margin-top: -8px;
  margin-bottom: -8px;
}
</style>
