<template>
  <button
    type="button"
    class="vm-text-link"
    :disabled="disabled"
    @click="emit('click', $event)"
  >
    <slot>{{ label ?? crudLabel('view') }}</slot>
  </button>
</template>

<script setup lang="ts">
import { crudLabel } from '../style'
defineOptions({ name: 'vm-text-link' })

withDefaults(
  defineProps<{
    label?: string
    disabled?: boolean
  }>(),
  {
    label: undefined,
    disabled: false,
  },
)

const emit = defineEmits<{
  click: [e: MouseEvent]
}>()
</script>

<style lang="scss" scoped>
.vm-text-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;

  &:hover:not(:disabled) {
    color: var(--brand-deep);
    text-decoration: underline;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }
}
</style>
