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

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

const props = withDefaults(defineProps<BackgroundBoxProps & TouchableFlexProps>(), {
  activeOpacity: 0.7,
  touchable: true,
});

const { makeStyle } = useBackgroundBoxStyleMaker(props);
const style = computed(() => {
  return {
    ...props.innerStyle,
    ...makeStyle(),
  }
});

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


defineOptions({
  options: {
    virtualHost: true,
  },
})
</script>