<template>
  <form
    class="page-form"
    @submit="onSubmit"
  >
    <UiButton
      icon="chevron-left"
      color="secondary"
      type="link"
      class="mb-8"
      :href="backLink"
    >
      {{ backText }}
    </UiButton>

    <slot name="title">
      <h1 :class="titleOffset ? 'mb-32' : ''">
        {{ title }}
      </h1>
    </slot>

    <div class="page-form__summary">
      <StaticError class="mb-16" />

      <slot />
    </div>

    <slot name="submit" v-bind="{ isSubmitting }">
      <UiButton
        class="page-form__submit"
        size="large"
        native-type="submit"
        :loading="isSubmitting"
      >
        {{ submitText }}
      </UiButton>
    </slot>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate'

const props = defineProps({
  title: { type: String, required: true },
  backLink: { type: String, required: true },
  backText: { type: String, required: true },
  submitText: { type: String, required: true },
  titleOffset: { type: Boolean, default: true },
  handler: {
    type: Function,
    required: true,
  },
})

const { handleSubmit, isSubmitting } = useForm()

const onSubmit = handleSubmit(async (values) => {
  await props.handler(values)
})
</script>

<style lang="scss">
.page-form {
  margin: 0 auto;
  width: 500px;

  &__summary {
    padding-top: var(--page-form-padding-top, 24px);
    padding-bottom: var(--page-form-padding-bottom, 16px);
  }

  &__submit {
    width: 100%;
  }
}
</style>
