<template>
  <li>
    <a :href="link" :target="isExternalLink ? '_blank' : undefined" class="list-item-link">
      <svg v-if="icon" class="icon" aria-hidden="true"><use :xlink:href="`#icon-${icon}`" /></svg>
      <span class="link-content">
        <span class="link-title">{{ title }}</span>
        <span v-if="caption" class="link-caption">{{ caption }}</span>
      </span>
    </a>
  </li>
</template>

<script setup lang="ts">
import { computed } from 'vue';

export interface EssentialLinkProps {
  title: string;
  caption?: string;
  link?: string;
  icon?: string;
}

const props = withDefaults(defineProps<EssentialLinkProps>(), {
  caption: '',
  link: '#',
  icon: '',
});

const isExternalLink = computed(() => {
  return props.link?.startsWith('http') || props.link?.startsWith('//');
});
</script>

<style scoped>
/* Basic styling for EssentialLink as a list item link */
.list-item-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--dark);
  border: var(--border-width) var(--border-style) transparent; /* For focus indication */
  transition: background-color var(--transition-speed) var(--transition-ease-out);
}

.list-item-link:hover,
.list-item-link:focus-visible {
  background-color: rgba(0,0,0,0.05);
  border-color: var(--primary);
  outline: none;
}

.list-item-link .icon {
  margin-right: 0.8rem;
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
}

.link-content {
  display: flex;
  flex-direction: column;
}

.link-title {
  font-weight: bold;
}

.link-caption {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}
</style>