<script setup>
defineProps({
  active: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    required: true,
  },
})

defineEmits(['click'])
</script>

<template>
  <button
    type="button"
    :class="[
      'flex-1 py-2 rounded-lg text-[11px] font-display font-semibold tracking-wide uppercase transition-all duration-300 relative z-10',
      active ? 'text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700',
    ]"
    @click="$emit('click')"
  >
    <div
      v-if="active"
      class="absolute inset-0 bg-white rounded-lg -z-10 shadow-[0_2px_8px_rgb(0,0,0,0.04)]"
    />
    {{ label }}
  </button>
</template>
