<script setup lang="ts">
defineProps<{
  title: string;
  subtitle?: string;
}>();
</script>

<template>
  <div class="page-header">
    <div class="page-header__text">
      <h1 class="page-header__title">{{ title }}</h1>
      <p v-if="subtitle" class="page-header__subtitle">{{ subtitle }}</p>
    </div>
    <div class="page-header__actions">
      <slot name="actions" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: $space-md;
  margin-bottom: $space-lg;

  &__title {
    font-size: $font-size-2xl;
    font-weight: 700;
    margin: 0;
    color: $color-text;
  }

  &__subtitle {
    font-size: $font-size-sm;
    color: $color-text-muted;
    margin: $space-xs 0 0;
  }

  &__actions {
    display: flex;
    gap: $space-sm;
    flex-wrap: wrap;
  }

  @media (max-width: $bp-mobile) {
    flex-direction: column;
    &__actions {
      width: 100%;
      justify-content: flex-end;
    }
  }
}
</style>
