<template>
  <component
    :is="clickable ? 'button' : 'h3'"
    class="vm-card-title"
    :type="clickable ? 'button' : undefined"
    :title="title"
    @click="clickable ? emit('click', $event) : undefined"
  >
    <slot>{{ text }}</slot>
  </component>
</template>

<script setup lang="ts">
defineOptions({ name: 'vm-card-title' })

withDefaults(
  defineProps<{
    text?: string
    title?: string
    clickable?: boolean
  }>(),
  {
    clickable: false,
  },
)

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

<style lang="scss" scoped>
.vm-card-title {
  margin: 0 0 4px;
  overflow: hidden;
  border: none;
  background: transparent;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.vm-card-title {
  width: 100%;
  padding: 0;
  cursor: pointer;

  &:hover {
    color: var(--brand);
  }
}
</style>
