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

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

const props = defineProps<Props>()

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

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

<template>
  <div class="event-editor-section">
    <div class="text-subtitle-1 mb-2">Title</div>
    <!-- Read-only view -->
    <div v-if="mode === 'view'" class="mb-4">
      <div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>
    </div>

    <!-- Edit view -->
    <div v-else>
      <v-text-field
        v-model="labelValue"
        label="Title"
        variant="outlined"
        density="compact"
        :rules="[v => !!v || 'Title is required']"
      />
    </div>
  </div>
</template>

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