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

const modelValue = defineModel();
</script>

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

<style lang="scss" scoped>
.x-input {
    background-color: #F2F3F5;

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