---
import type { Form as Props } from '~/types';
import Button from '~/components/ui/Button.astro';

const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
---

<form>
  {
    inputs &&
      inputs.map(
        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
          name && (
            <div class="mb-6">
              {label && (
                <label for={name} class="block text-sm font-medium">
                  {label}
                </label>
              )}
              <input
                type={type}
                name={name}
                id={name}
                autocomplete={autocomplete}
                placeholder={placeholder}
                class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
              />
            </div>
          )
      )
  }

  {
    textarea && (
      <div>
        <label for="textarea" class="block text-sm font-medium">
          {textarea.label}
        </label>
        <textarea
          id="textarea"
          name={textarea.name ? textarea.name : 'message'}
          rows={textarea.rows ? textarea.rows : 4}
          placeholder={textarea.placeholder}
          class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
        />
      </div>
    )
  }

  {
    disclaimer && (
      <div class="mt-3 flex items-start">
        <div class="flex mt-0.5">
          <input
            id="disclaimer"
            name="disclaimer"
            type="checkbox"
            class="cursor-pointer mt-1 py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
          />
        </div>
        <div class="ml-3">
          <label for="disclaimer" class="cursor-pointer select-none text-sm text-gray-600 dark:text-gray-400">
            {disclaimer.label}
          </label>
        </div>
      </div>
    )
  }

  {
    button && (
      <div class="mt-10 grid">
        <Button variant="primary" type="submit">
          {button}
        </Button>
      </div>
    )
  }

  {
    description && (
      <div class="mt-3 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">{description}</p>
      </div>
    )
  }
</form>