<template>
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-orange-200 shadow-lg transform transition-transform z-50"
         :class="totalItems > 0 ? 'translate-y-0' : 'translate-y-full'">
        <div class="p-4">
            <div class="flex justify-between items-center mb-3">
                <div>
                    <p class="text-sm text-gray-500">Total Item</p>
                    <p class="font-bold text-xl text-blue-800">{{ totalItems }}</p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-500">Total Belanja</p>
                    <p class="font-bold text-xl text-orange-600">Rp {{ formatRupiah(totalAmount) }}</p>
                </div>
            </div>

            <button
                @click="$emit('submit')"
                class="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-blue-800 transition active:scale-95"
            >
                Proses PO ({{ totalItems }} item)
            </button>
        </div>
    </div>
</template>

<script setup>
defineProps({
    totalItems: {
        type: Number,
        required: true
    },
    totalAmount: {
        type: Number,
        required: true
    }
})

defineEmits(['submit'])

const formatRupiah = (value) => {
    return new Intl.NumberFormat('id-ID').format(value)
}
</script>
