<script setup lang="ts">
const props = defineProps<{
  title: string;
  image: string;
  date: string;
}>();
</script>

<template>
  <InternalHeaderSection
    :pages="[{ name: $t('blogs'), link: '/blogs' }, { name: props.title }]"
    :image="{ Url: props.image, Alt: props.title }"
  >
    <template #title>
      <p class="mb-4 text-3xl font-bold">{{ props.title }}</p>
      <p
        class="text-primary flex items-center justify-center gap-1 text-sm font-normal"
      >
        {{ props.date }}
        <SvgClock class="h-4 w-4" />
      </p>
    </template>
  </InternalHeaderSection>
</template>
