<script setup>
const props = defineProps({
  label: {
    type: String,
    required: false,
    default: null
  },
  icon: {
    type: String,
    required: false
  },
  variant: {
    type: String,
    default: "solid"
  },
  color: {
    type: String,
    default: "primary"
  },
  pos: {
    type: Number,
    default: 6 // Abstand von unten in Rem (6 = 1.5rem * 6 = 9rem)
  }
})

const emit = defineEmits(["click"])
</script>

<template>
  <!-- Wrapper für Position + Animation -->
  <div
      class="fixed right-5 z-40 transition-all"
      :style="{ bottom: `calc(${props.pos}rem + env(safe-area-inset-bottom))` }"
  >
    <UButton
        id="fab"
        :icon="props.icon"
        :label="props.label"
        :variant="props.variant"
        :color="props.color"
        @click="emit('click')"
        class="
          fab-base
          shadow-xl
          hover:shadow-2xl
          active:scale-95
          transition
        "
    />
  </div>
</template>

<style scoped>
/* FAB Basis */
.fab-base {
  border-radius: 9999px;
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;

  /* Wenn nur ein Icon vorhanden ist → runder Kreis */
  /* Wenn Label + Icon → Extended FAB */
}

/* Optional: Auto-Kreisen wenn kein Label */
#fab:not([label]) {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
</style>
