<template>
  <button class="fab" :disabled="disabled" @click="onClick" :aria-label="ariaLabel">
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
      <circle cx="14" cy="14" r="14" fill="#667eea" />
      <path d="M14 8v12M8 14h12" stroke="#fff" stroke-width="2" stroke-linecap="round" />
    </svg>
  </button>
</template>

<script setup lang="ts">
const props = defineProps<{ ariaLabel?: string; disabled?: boolean }>()
const emit = defineEmits<{ (e: 'click'): void }>()

function onClick() {
  if (!props.disabled) {
    emit('click')
  }
}
</script>

<style scoped>
.fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--fab-bg);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 24px;
  z-index: 1300;
}

.fab:hover {
  background: var(--fab-hover-bg);
}

.fab:active {
  background: var(--fab-active-bg);
}
.fab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
svg {
  display: block;
}
</style>
