<script setup>
import { computed, onMounted } from 'vue';
import { Link, router } from '@inertiajs/vue3';
import { useAuthStore } from '@/Stores/useAuthStore';

defineProps({
    title: { type: String, required: true },
    subtitle: { type: String, default: '' },
    backHref: { type: String, default: null },
    backLabel: { type: String, default: '' },
});

const authStore = useAuthStore();
const isRtl = computed(() => authStore.isRtl);
const locale = computed(() => authStore.locale);

function toggleTheme() {
    authStore.setThemeLocal(authStore.theme === 'navy' ? 'dark' : 'navy');
}

function toggleLocale() {
    const next = locale.value === 'en' ? 'ar' : 'en';
    authStore.setLocaleLocal(next);
    router.post(route('guest.locale'), { locale: next });
}

onMounted(() => {
    authStore.setThemeLocal(localStorage.getItem('ip_theme') ?? 'navy');
    authStore.setLocaleLocal(localStorage.getItem('ip_locale') ?? 'en');
});
</script>
