<template>
  <div class="solution-form">
    <textarea
      placeholder="Lösung erfassen"
      class="skillbox-textarea"
      :value="text"
      @input="$emit('change-text', $event.target.value, index)"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

export interface Props {
  value: any;
  index: number;
}
const props = withDefaults(defineProps<Props>(), {
  value: null,
  index: -1,
});
defineEmits(['change-text']);

const text = computed(() => {
  // todo: refactor this and use the helper, just copied it from TextForm.vue
  return props.value.text ? props.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/gi, '') : '';
});
</script>

<style lang="postcss" scoped>
.solution-form {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
</style>
