---
import type { CollectionEntry } from 'astro:content'

interface Props {
  field: CollectionEntry<'forms'>['data']['form']['fields'][number]
}

const field = Astro.props.field
const fieldType = field.type as astroHTML.JSX.HTMLInputTypeAttribute
---

<div class="flex w-full flex-col gap-2">
  <label for={field.id} class="text-muted-foreground pl-1">
    {
      field.required ? (
        <>
          {field.label}&nbsp;<span class="text-primary/30">*</span>
        </>
      ) : (
        field.label
      )
    }
  </label>

  {
    () => {
      switch (field.type) {
        case 'textarea':
          return (
            <textarea
              id={field.id}
              name={field.id}
              required={field.required}
              rows="4"
              class="border-border rounded-xl border px-4 py-2"
            />
          )

        case 'select':
          return (
            <select
              id={field.id}
              name={field.id}
              required={field.required}
              class="border-border rounded-xl border px-4 py-2"
            >
              {field.options?.map((opt) => (
                <option value={opt}>{opt}</option>
              ))}
            </select>
          )

        case 'radio':
        case 'checkbox':
          return (
            <div class="flex flex-col gap-4 pl-1">
              {field.options?.map((opt, _) => (
                <label class="cursor-pointer">
                  <input
                    type={fieldType}
                    name={field.id}
                    value={opt}
                    required={field.type === 'radio' && field.required}
                    class="mr-2"
                  />
                  {opt}
                </label>
              ))}
            </div>
          )
        default:
          return (
            <input
              type={fieldType || 'text'}
              id={field.id}
              name={field.id}
              required={field.required}
              class="border-border rounded-xl border px-4 py-2"
            />
          )
      }
    }
  }
</div>