<script setup lang="ts">
import { computed } from "vue";
import { Link } from "@inertiajs/vue3";
import LocaleSwitcher from "./LocaleSwitcher.vue";
import type { Language } from "../types";

const props = defineProps<{
  title: string;
  backHref?: string | null;
  backLabel?: string | null;
  currentLocale?: string | null;
  languages?: Language[];
  onSwitchLocale?: (code: string) => void;
}>();

const hasLocales = computed(() => (props.languages ?? []).length > 1);
</script>

<template>
  <div class="mb-6">
    <Link
      v-if="backHref"
      :href="backHref"
      class="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-2"
    >
      <svg
        class="h-3.5 w-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 19l-7-7 7-7"
        />
      </svg>
      {{ backLabel }}
    </Link>
    <div class="flex items-center justify-between gap-4">
      <h1 class="text-2xl font-semibold tracking-tight">{{ title }}</h1>
      <div class="flex items-center gap-3">
        <slot name="actions" />
        <LocaleSwitcher
          v-if="hasLocales && currentLocale != null && onSwitchLocale"
          :current-locale="currentLocale"
          :languages="languages ?? []"
          :on-switch="onSwitchLocale"
        />
      </div>
    </div>
  </div>
</template>
