<template>
  <section class="px-4">
    <header class="flex justify-between items-end mb-4">
      <div>
        <div v-if="title" class="font-bold uppercase">{{ title }}</div>
        <div v-if="description" class="text-sm text-base-content/50">{{ description }}</div>
      </div>

      <div v-if="moreLink">
        <RouterLink :to="moreLink" class="btn btn-soft btn-xs" @click="haptic.selectionChanged">
          {{ moreText || 'Смотреть всё' }}
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
        </RouterLink>
      </div>
    </header>
    <main>
      <slot></slot>
    </main>
  </section>
</template>

<script setup>
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

const props = defineProps({
  title: String,
  description: String,
  moreLink: [String, Object],
  moreText: String,
});

const haptic = useHapticFeedback();
</script>
