<!--
    Describe this component...
-->
<template>
    <div
        :class="bem({ ...variantsMap })"
        :style="{
            display: 'flex',
            'align-items': 'flex-start',
            'flex-direction': 'column',
            gap: '0.5em',
        }"
    >
        <label :for="calcInputId" :class="[bem('label'), labelClass]">
            <slot name="label">
                {{ label }}
            </slot>
        </label>
        <slot name="default" :id="calcInputId" />
    </div>
</template>

<script>
import PxBaseUniqueId from '../bases/PxBaseUniqueId.vue';
import PxBaseVariants from '../bases/PxBaseVariants.vue';

export default {
    name: 'px-labeled-input',
    // components: { Component },
    mixins: [PxBaseUniqueId, PxBaseVariants],
    props: {
        label: { type: String, default: 'Input' },
        labelClass: { type: [String, Array], default: null },
        prefix: { type: String, default: 'input' },
        inputId: { type: String, default: null },
    },
    // data() { return { b: 0 }; },
    computed: {
        calcInputId() {
            if (this.inputId) {
                return this.inputId;
            } else {
                return this.uniqueId(this.prefix);
            }
        },
    },
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>
