<template>
  <div
    class="p-4 items-center"
    :class="props.isActive === true ? 'lg:bg-[#d8ffee] rounded-full' : 'bg-white'"
    @click="tapAction"
  >
    <span :class="props.type === 1 ? 'font-bold text-[22px]' : 'text-[18px]'">{{
      props.title
    }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface Props {
  title: string
  type?: number
  tap?: boolean
  index?: number
  isActive?: boolean
}
const props = withDefaults(defineProps<Props>(), {isActive:false})
const emit = defineEmits<{tapWhichOne:[value:string]}>()

const tapAction = () => {
  if(props.type === 2)
  emit('tapWhichOne',props.title)
}
</script>

<style lang="scss" scoped>
</style>