<script setup lang="ts">
import { usePage } from '@inertiajs/vue3';
import { ShieldAlert } from 'lucide-vue-next';

const page = usePage<any>();
const isDemoMode = page.props.is_demo_mode as boolean;
</script>

<template>
    <Transition
        enter-active-class="transition ease-out duration-300"
        enter-from-class="opacity-0 -translate-y-2"
        enter-to-class="opacity-100 translate-y-0"
    >
        <div
            v-if="isDemoMode"
            class="relative overflow-hidden bg-gradient-to-r from-amber-500 via-orange-500 to-amber-500 text-white select-none"
        >
            <!-- Animated shimmer overlay -->
            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />

            <div class="relative flex items-center justify-center gap-3 px-4 py-2.5 text-xs sm:text-sm font-semibold text-center">
                <ShieldAlert class="h-4 w-4 shrink-0 animate-pulse text-white" />
                <span>
                    <span class="font-extrabold uppercase tracking-wide">Mode Demo Aktif</span>
                    <span class="hidden sm:inline"> — Semua operasi tambah, ubah, dan hapus data dinonaktifkan. Anda hanya dapat melihat data dan laporan.</span>
                    <span class="sm:hidden"> — Hanya dapat melihat data.</span>
                </span>
            </div>
        </div>
    </Transition>
</template>
