<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

defineProps<{
  hideIcon?: boolean;
  icon?: string;
}>();
</script>

<template>
  <q-page-sticky position="bottom-right" :offset="[8, 8]">
    <q-fab
      v-if="!hideIcon"
      id="btn-add"
      padding="sm"
      :icon="icon ? undefined : 'mdi-plus'"
      direction="up"
      class="color-btn"
    >
      <template #icon v-if="icon">
        <Icon :icon width="24" />
      </template>
      <slot>
        <q-fab-action
          padding="xs"
          color="primary"
          icon="mdi-account-plus"
          v-if="!hideIcon"
        />
      </slot>
    </q-fab>

    <q-btn
      v-else
      fab
      id="btn-add"
      padding="sm"
      :icon="icon ? undefined : 'mdi-plus'"
      direction="up"
      class="color-btn"
    >
      <Icon v-if="icon" :icon width="24" />
    </q-btn>
  </q-page-sticky>
</template>

<style scoped>
.color-btn {
  color: white;
  background: hsla(var(--blue-10-hsl) / 0.5);
  transition: background 0.3s ease-in-out;
}

:deep(:where(.q-hoverable:hover, .q-fab--opened)) {
  transition: background 0.3s ease-in-out;
  background: hsla(var(--blue-10-hsl) / 1) !important;
}
</style>
