<template>
  <Touchable :activeOpacity="activeOpacity" @click="emit('click')">
    <BackgroundBox v-bind="props">
      <slot />
    </BackgroundBox>
  </Touchable>
</template>

<script setup lang="ts">
import BackgroundBox, { type BackgroundBoxProps } from '../display/block/BackgroundBox.vue';
import Touchable from '../feedback/Touchable.vue';

const props = withDefaults(defineProps<BackgroundBoxProps & {
  activeOpacity?: number;
}>(), {
  activeOpacity: 0.7,
});

const emit = defineEmits(['click']);

</script>