<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import Select from '~/components/pub/my-ui/form/select.vue'
import { Input } from '~/components/pub/ui/input'
import { cn } from '~/lib/utils'

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

defineProps<{
  fieldNameInput: string
  placeholder: string
  labelForInput: string
  errors?: FormErrors
  class?: string
  selectClass?: string
  fieldGroupClass?: string
  labelClass?: string
  maxLength?: number
  isRequired?: boolean
}>()
</script>

<template>
  <DE.Cell :col-span="2">
    <DE.Label
      :label-for="fieldNameInput"
      :is-required="isRequired"
    >
      {{ labelForInput }}
    </DE.Label>

    <DE.Field
      :id="fieldNameInput"
      :errors="errors"
    >
      <FormField
        v-slot="{ componentField }"
        :name="fieldNameInput"
      >
        <FormItem>
          <FormControl>
            <Input
              v-bind="componentField"
              type="text"
              :placeholder="placeholder"
              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </DE.Field>
  </DE.Cell>
</template>
