<template>
    <div>
        <h2 class="bm-admin__title">Settings</h2>
        <label class="bm-rail-field">
            <span class="bm-rail-field__label">Slug</span>
            <input
                type="text"
                class="bm-rail-field__input"
                :value="value.slug || ''"
                @input="emit('slug', $event.target.value)"
            />
        </label>
        <label class="bm-rail-field">
            <span class="bm-rail-field__label">Description</span>
            <textarea
                class="bm-rail-field__input"
                rows="3"
                :value="value.description || ''"
                @input="emit('description', $event.target.value)"
            ></textarea>
        </label>
        <label class="bm-rail-field">
            <span class="bm-rail-field__label">Icon (Font Awesome class)</span>
            <input
                type="text"
                class="bm-rail-field__input"
                :value="value.icon || ''"
                placeholder="fa-cube"
                @input="emit('icon', $event.target.value)"
            />
        </label>
    </div>
</template>

<script>
export default {
    name: 'BlockSettings',
    props: {
        value: { type: Object, required: true },
    },
    methods: {
        emit(key, value) {
            this.$emit('input', { ...this.value, [key]: value });
        },
    },
};
</script>
