<template>
  <div class="tw-flex tw-items-center tw-justify-between">
    <h1 class="tw-text-5xl tw-font-black tw-m-0">
      {{ title }}
      <small
        v-if="selectedShow"
        class="tw-text-gray-500 tw-text-base"
        data-testid="page-header:selected-show-name"
      >
        <SafeHTML :html="selectedShow.name" sanitize-preset="strip" />
      </small>
    </h1>
    <div class="tw-flex tw-justify-end tw-gap-4">
      <slot />
    </div>
  </div>

  <hr class="tw-w-full" />
</template>

<script setup>
import { useSelectedShow } from '@/utilities'
import SafeHTML from '@/components/generic/SafeHTML'

defineProps({
  title: { type: String, required: true },
})
const selectedShow = useSelectedShow()
</script>