<script setup>
import { computed } from 'vue'
import ProductFeatures from './ProductFeatures.vue'

const currencySymbol = computed(() => {
    const c = window.ChargePandaConfig?.currency
    if (!c) return '$'
    return c.format === '2' ? c.code : c.symbol
})

const currencyCode = computed(() => {
    return window.ChargePandaConfig?.currency?.code || 'USD'
})

defineProps({
    price: {
        type: String,
        required: true
    },
    features: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['update:price', 'update:features'])

const updatePrice = (event) => {
    emit('update:price', event.target.value)
}

const updateFeatures = (newFeatures) => {
    emit('update:features', newFeatures)
}
</script>

<template>
    <div>
        <div class="mb-4">
            <label class="form-label fw-medium text-secondary small mb-2">Pricing</label>
            <div class="position-relative">
                <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary fw-semibold fs-5">{{ currencySymbol }}</span>
                <input type="text" class="form-control form-control-lg ps-5 fw-bold fs-3 py-3" 
                       :value="price" 
                       @input="updatePrice" 
                       placeholder="0.00">
                <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-secondary small">{{ currencyCode }}</span>
            </div>
        </div>

        <ProductFeatures 
            :modelValue="features"
            @update:modelValue="updateFeatures"
        />
    </div>
</template>
