<script setup>
const {placeholder, height} = defineProps({
    placeholder: {
        type: String,
        default: "",
    },
    height: {
        type: String,
        default: "96rpx",
    }
});

const modelValue = defineModel();
</script>

<template>
    <view class="x-input rounded-[12rpx] !flex items-center px-[32rpx]">
        <slot name="prefix"></slot>
        <input v-model="modelValue" v-bind="$attrs" :placeholder="placeholder"></input>
        <slot name="suffix"></slot>
    </view>
</template>

<style lang="scss" scoped>
.x-input {
    background-color: #F2F3F5;
    height: v-bind(height);

    :deep(input) {
        background-color: rgba(0, 0, 0, 0);
        flex-grow: 1;
    }
}
</style>
