<script setup lang="ts">
import { Input } from '~/components/pub/ui/input'
import { cn } from '~/lib/utils'

import * as DE from '~/components/pub/my-ui/doc-entry'

const props = defineProps<{
  fieldName: string
  label: string
  placeholder?: string
  class?: string
  selectClass?: string
  fieldGroupClass?: string
  labelClass?: string
}>()

const { placeholder = 'Pilih tanggal pemeriksaan', class: containerClass, fieldGroupClass, labelClass } = props
</script>

<template>
  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
    <DE.Label
      :label-for="fieldName"
      :class="cn('select-field-label', labelClass)"
    >
      {{ label }}
    </DE.Label>
    <DE.Field
      :id="fieldName"
      :class="cn('select-field-wrapper')"
    >
      <FormField
        v-slot="{ componentField }"
        :name="fieldName"
      >
        <FormItem>
          <FormControl>
            <Input
              id="birthDate"
              type="date"
              min="1980-01-01"
              :max="new Date().toISOString().split('T')[0]"
              v-bind="componentField"
              :placeholder="placeholder"
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </DE.Field>
  </DE.Cell>
</template>
