<script setup>
import {ref, defineEmits} from "vue";

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

const isButtonActive = ref(false);

const handleButtonPress = () => {
  isButtonActive.value = true;
};
const handleButtonRelease = () => {
  isButtonActive.value = false;
  emit("click")
};
</script>
<template>
  <div
      :class="[
      'bg-white transition-all duration-200',
      isButtonActive ? 'scale-95 bg-gray-200' : ''
    ]"
      @touchstart="handleButtonPress"
      @touchend="handleButtonRelease"
  >
    <slot></slot>
  </div>
</template>