<template>
  <div class="ivyforms-html-content-options">
    <!-- Content Label -->
    <div class="ivyforms-html-content-options__label medium-14 ivyforms-mb-8">
      {{ getLabel('content') }}
    </div>

    <!-- HTML Content Editor -->
    <IvyEditor :model-value="htmlContent" @update:model-value="updateHtmlContent" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Field } from '@/types/field'
import IvyEditor from '@/views/_components/html-editor/IvyEditor.vue'

interface Props {
  field: Field | null
  updateField: (key: string, value: unknown) => void
  getLabel: (key: string) => string
}

const props = defineProps<Props>()

const htmlContent = computed(() => props.field?.htmlContent || '')

const updateHtmlContent = (value: string) => {
  props.updateField('htmlContent', value)
}
</script>

<style lang="scss" scoped>
.ivyforms-html-content-options {
  &__label {
    color: var(--map-base-text-0);
    font-weight: 500;
  }

  :deep(.ivyforms-editor) {
    margin-top: 8px;
  }
}
</style>
