<script lang='ts' setup>
import type { ComponentInstance } from "vue";
import { IonTextarea } from "@ionic/vue";

defineProps<{
  label?: string;
}>();

const vm = getCurrentInstance()!;

function changeRef(exposed: any) {
  vm.exposed = exposed;
}

defineExpose({} as ComponentInstance<typeof UiInput>);
</script>

<template>
  <div>
    <div v-if="label" class="label">
      {{ label }}
    </div>
    <component :is="h(IonTextarea, { ...$attrs, ref: changeRef })" class="ui-textarea" />
  </div>
</template>

<style scoped>
.label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 14px;
  color: var(--ion-text-color-secondary);
}
.ui-textarea {
  --padding-start: 12px;
  --padding-end: 12px;
  --background: var(--ui-input-background, #fff);
  --color: var(--ui-input-color, #000);
  --border-radius: 8px;
}
</style>
