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

interface Props {
  mode: 'edit' | 'view'
  description?: string | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:description': [description: string | null]
}>()

const descriptionValue = computed({
  get: () => props.description ?? '',
  set: (value) => emit('update:description', value || null)
})
</script>

<template>
  <div v-if="descriptionValue || mode === 'edit'" class="event-editor-section">
    <div class="text-subtitle-1 mb-2">Description</div>
    <!-- Read-only view -->
    <div v-if="mode === 'view'" class="mb-4">
      <div class="mb-2 pa-2 white-space-pre-wrap">{{ descriptionValue || 'No description' }}</div>
    </div>

    <!-- Edit view -->
    <div v-else>
      <v-textarea
        v-model="descriptionValue"
        label="Description"
        variant="outlined"
        density="compact"
        rows="3"
        auto-grow
      />
    </div>
  </div>
</template>

<style scoped>
.event-editor-section {
  margin-bottom: 1.5rem;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}
</style>
