<script setup lang="ts">
// const props =
withDefaults(
	defineProps<{
		description?: string
		label?: string
		modelValue: any
		placeholder?: string
		editMode?: boolean
		small?: boolean
	}>(),
	{
		description: '',
		editMode: true,
		placeholder: '',
		label: '',
	},
)
// TODO: remove this Nati ?

const emits = defineEmits(['update:modelValue'])
function handleInput(e: Event) {
	const el = e.target as HTMLInputElement
	emits('update:modelValue', el.value)
}
</script>

<template>
	<div
		class="bagel-input"
		:title="description"
		:class="{ small }"
	>
		<label v-if="label">
			<LangText :input="label" />
		</label>
		<textarea
			:value="modelValue"
			:class="{ 'no-edit': !editMode }"
			:placeholder="placeholder"
			@input="handleInput"
		/>
	</div>
</template>

<style scoped>
.bagel-input textarea {
	font-family: monospace;
}

[dir='rtl'] .bagel-input textarea {
	direction: ltr;
}
</style>
