<script lang='ts' setup>
import type { ComponentInstance } from "vue";
import UiInput from "@/ui/input/index.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(UiInput, { ...$attrs, ref: changeRef })" />
  </div>
</template>

<style scoped>
.label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 14px;
  color: var(--ion-text-color-secondary);
}
</style>
