<template>
  <view
    class="quick-entry"
    hover-class="entry-hover"
    @click="$emit('click')"
  >
    <view class="entry-icon">
      <text class="uni-icons text-primary text-xl" :class="icon"></text>
    </view>
    <text class="entry-label">{{ label }}</text>
  </view>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    label: string
    icon?: string
  }>(),
  {
    icon: 'uniui-folder-add-filled'
  }
)

defineEmits<{
  click: []
}>()
</script>

<style scoped>
.quick-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
  border-radius: 12px;
  background-color: #f9fafb;
}

.entry-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-label {
  margin-top: 8px;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.entry-hover {
  background-color: #f3f4f6;
  transform: scale(0.98);
}
</style>
