<script setup>
import {NButton, NP, NFlex, NIcon} from "naive-ui";
import {Link} from "@inertiajs/vue3";
import {computed, h} from "vue";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  },
  href: {
    type: String,
    default: '/'
  },
  icon: {
    type: [Object, Function],
    default: null
  }
})

const buttonThemeOverride = {
  heightLarge: '64px',
  borderRadiusLarge: '8px'
}

const pThemeOverride = {
  pMargin: '',
  pLineHeight: '1.4'
}

const hasIcon = computed(() => props.icon !== null)
</script>

<template>
  <NButton :tag="Link" :href="href" :theme-overrides="buttonThemeOverride" size="large" block class="justify-start! text-left!">
    <template v-if="hasIcon" #icon>
      <component :is="icon" v-if="icon" />
    </template>
    <NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
      {{ title }}
      <NP :theme-overrides="pThemeOverride" depth="3">
        {{ description }}
      </NP>
    </NFlex>
  </NButton>
</template>

<style scoped>
:deep(.n-button) {
  @apply justify-start!;
}
</style>
