<!-- components/JalaliDateInput.client.vue -->
<template>
    <div >
      <PersianDatePicker 
        v-model="selectedDate"
        format="YYYY/MM/DD"
        display-format="jYYYY/jMM/jDD"
        placeholder="تاریخ را انتخاب کنید"
        :auto-submit="false"
        @change="handleDateChange"
      />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { toGregorian } from 'jalaali-js'
  
  const selectedDate = ref('')
  const emit = defineEmits(['date-selected'])
  
  const handleDateChange = () => {
    if (!selectedDate.value) {
      emit('date-selected', null)
      return
    }
  
    try {
      // Convert Jalali to Gregorian
      const [gy, gm, gd] = selectedDate.value.split('/').map(Number)
      
      // Format as YYYY-MM-DD
      const gregorianDate = `${gy}-${String(gm).padStart(2, '0')}-${String(gd).padStart(2, '0')}`
      emit('date-selected', gregorianDate)
    } catch (error) {
      console.error('Date conversion error:', error)
      emit('date-selected', null)
    }
  }
  </script>