<template>
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl p-4 text-white shadow-lg">
        <div class="flex justify-between items-start mb-3">
            <div>
                <p class="text-blue-100 text-xs">Kode Customer</p>
                <p class="font-bold text-lg">#{{ customer.id }}</p>
            </div>
            <div class="bg-orange-500 px-3 py-1 rounded-full">
                <p class="text-xs font-semibold">Plafon</p>
                <p class="font-bold text-sm">Rp {{ formatRupiah(customer.plafon) }}</p>
            </div>
        </div>

        <h2 class="text-xl font-bold mb-2">{{ customer.name }}</h2>

        <div class="space-y-1 text-sm text-blue-100">
            <p class="flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                {{ customer.address }}
            </p>
            <p class="flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                    </path>
                </svg>
                {{ customer.phone }}
            </p>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    customer: {
        type: Object,
        required: true
    }
})

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