<template>
  <Card class="p-5">
    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Bereiche</p>
    <div class="mt-4 grid gap-2">
      <a
        v-for="section in sections"
        :key="section.href"
        :href="section.href"
        :class="section.primary ? primaryClasses : secondaryClasses"
      >
        {{ section.label }}
      </a>
    </div>
  </Card>
</template>

<script setup lang="ts">
import Card from '../ui/Card.vue'

type SectionLink = {
  href: string
  label: string
  primary?: boolean
}

defineProps<{
  sections: SectionLink[]
}>()

const primaryClasses =
  'rounded-2xl border border-violet-100 bg-violet-50/70 px-4 py-3 text-sm font-semibold text-violet-800 no-underline transition hover:bg-violet-100'
const secondaryClasses =
  'rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm font-semibold text-slate-700 no-underline transition hover:bg-violet-50'
</script>
