<template>
  <div class="tw:flex tw:justify-center tw:items-start tw:p-8">
     <!-- Phone Mockup -->
     <div class="tw:relative tw:inline-grid tw:justify-items-center tw:bg-black tw:border-[2.5px] tw:border-gray-600 tw:rounded-[32.5px] tw:p-[3px] tw:overflow-hidden tw:w-full tw:max-w-[280px]" style="aspect-ratio: 462/978;">
      <!-- Camera -->
      <div class="tw:absolute tw:top-[3%] tw:left-1/2 tw:-translate-x-1/2 tw:z-10 tw:bg-black tw:rounded-[8.5px] tw:w-[28%] tw:h-[3.7%]"></div>

      <!-- Display -->
      <div class="tw:relative tw:rounded-[27px] tw:w-full tw:h-full tw:overflow-hidden tw:bg-gray-100">
        <div class="tw:pt-15 tw:px-2 tw:pb-2 tw:overflow-y-auto tw:max-h-full tw:h-full">
          <FormKit
            type="form"
            @submit="handleSubmit"
            :submit-label="submitLabel"
            outer-class="tw:space-y-4"
            v-model="form"
          >
            <FormKitSchema :schema="schema" :data="data"/>
          </FormKit>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { FormKit, FormKitSchema } from '@formkit/vue';
import {reactive, ref} from "vue";

const form = ref({});
const data = reactive(form);

const props = defineProps({
  schema: {
    type: Array,
    required: true,
    default: () => [],
  },
  submitLabel: {
    type: String,
    default: 'Отправить',
  },
});

const emit = defineEmits(['submit']);

function handleSubmit(data) {
  emit('submit', data);
}
</script>

<style scoped>
::v-deep(ul.formkit-messages) {
  margin-bottom: 0;
  padding-left: 0;
}
</style>
