<template>
    <section class="bm-prop-panel">
        <h3 class="bm-prop-panel__title">{{ panel.label }}</h3>
        <div
            v-for="property in panel.properties"
            :key="property.name"
            class="bm-prop-row"
        >
            <label class="bm-prop-row__label">{{ property.label }}</label>
            <TokenValueInput
                :value="values[property.name] || {}"
                :tokens="tokens"
                :token-types="property.token_types || []"
                :input="property.input"
                :options="property.options || []"
                @input="(v) => $emit('input', property.name, v)"
            />
        </div>
    </section>
</template>

<script>
import TokenValueInput from './TokenValueInput.vue';

export default {
    name: 'PropertyPanel',
    components: { TokenValueInput },
    props: {
        panel:  { type: Object, required: true },
        values: { type: Object, default: () => ({}) },
        tokens: { type: Array, required: true },
    },
};
</script>
