<script setup lang="ts">
import { ArrowUp as ArrowUpIcon } from 'lucide-vue-next'
import type { ChildElement } from '@/stores/elements'

type ElementRouteName = 'element' | 'admin-element'

interface Props {
  dataCy: string
  parentElement: ChildElement
  routeName: ElementRouteName
}

defineProps<Props>()
</script>

<template>
  <RouterLink
    :to="{
      name: routeName,
      params: { id: parentElement.id },
    }"
    class="element-parent-link"
    :data-cy="dataCy"
  >
    <ArrowUpIcon :size="16" aria-hidden="true" />
    <span>Parent: {{ parentElement.title }}</span>
  </RouterLink>
</template>

<style scoped>
.element-parent-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0.35rem 0;
  color: var(--color-slate);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.element-parent-link:hover,
.element-parent-link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.element-parent-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgb(61 78 93 / 24%);
  outline-offset: 3px;
}
</style>
