<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import DynamicForm from './components/DynamicForm.vue';
import { ref } from 'vue';
import FormBuilder from "@/components/FormBuilder.vue";

// const formInputs = ref([
//   {
//     id: 'username',
//     label: 'Username',
//     type: 'text',
//     defaultValue: '',
//     required: true
//   },
//   {
//     id: 'email',
//     label: 'Email',
//     type: 'email',
//     defaultValue: '',
//     required: true
//   },
//   {
//     id: 'password',
//     label: 'Password',
//     type: 'password',
//     defaultValue: '',
//     required: true
//   },
//   {
//     id: 'bio',
//     label: 'Bio',
//     type: 'textarea',
//     defaultValue: '',
//     required: false
//   },
//   {
//     id: 'age',
//     label: 'Age',
//     type: 'number',
//     defaultValue: '18',
//     required: true,
//     min: '18',
//     max: '100'
//   },
//   {
//     id: 'favoriteColor',
//     label: 'Favorite Color',
//     type: 'color',
//     defaultValue: '#000000',
//     required: false
//   },
//   {
//     id: 'birthDate',
//     label: 'Birth Date',
//     type: 'date',
//     defaultValue: '',
//     required: true
//   },
//   {
//     id: 'appointmentTime',
//     label: 'Appointment Time',
//     type: 'time',
//     defaultValue: '',
//     required: true
//   },
//   {
//     id: 'category',
//     label: 'Category',
//     type: 'select',
//     required: true,
//     options: [
//       { label: 'Option 1', value: 'option1' },
//       { label: 'Option 2', value: 'option2' },
//       { label: 'Option 3', value: 'option3' }
//     ]
//   },
//   {
//     id: 'interests',
//     label: 'Interests',
//     type: 'checkbox',
//     required: false,
//     options: [
//       { label: 'Interest 1', value: 'interest1' },
//       { label: 'Interest 2', value: 'interest2' },
//       { label: 'Interest 3', value: 'interest3' }
//     ]
//   },
//   {
//     id: 'preferredContactMethod',
//     label: 'Preferred Contact Method',
//     type: 'radio',
//     required: true,
//     options: [
//       { label: 'Email', value: 'email' },
//       { label: 'Phone', value: 'phone' }
//     ]
//   },
//   {
//     id: 'tags',
//     label: 'Tags',
//     type: 'multi-input',
//     defaultValue: '',
//     required: false
//   }
// ]);
</script>

<template>
  <header>

    <div class="wrapper">
<!--      <HelloWorld msg="You did it!" />-->
<!--      <DynamicForm :formInputs="formInputs" />-->
      <FormBuilder />

<!--      <nav>-->
<!--        <RouterLink to="/">Home</RouterLink>-->
<!--        <RouterLink to="/about">About</RouterLink>-->
<!--      </nav>-->
    </div>
  </header>

<!--  <RouterView />-->
</template>

<style scoped>
</style>
