<template>
  <div class="page-form-input">
    <label
      :for="id"
      class="page-form-input__label"
      >{{ label }}</label
    >
    <component
      :value="value"
      :class="classes"
      :data-cy="cyId"
      :is="type"
      :id="id"
      @input="input"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { getUniqueId } from '@/helpers/id';

interface Props {
  label: string;
  type?: string;
  value: string;
}
const props = withDefaults(defineProps<Props>(), {
  type: 'input',
});
const emit = defineEmits(['input']);
const classes = computed(() => {
  return `page-form-input__${props.type} skillbox-${props.type}`;
});
const cyId = computed(() => {
  return `page-form-input-${props.label.toLowerCase()}`;
});

const id = getUniqueId(); //todo: make unique id

const input = (e: Event) => {
  const value = (e.target as HTMLInputElement).value;
  emit('input', value);
};
</script>

<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';

.page-form-input {
  &__label {
    @include page-form-input-heading;
  }

  &__input,
  &__textarea {
    width: 100%;
    margin-bottom: $large-spacing;
  }
}
</style>
