<template>
  <div class="space-y-4 max-w-md">
    <FormKit
      type="select"
      v-model="auth.type"
      :options="[
        { value: 'none', label: 'No Auth' },
        { value: 'bearer', label: 'Bearer Token' },
        { value: 'basic', label: 'Basic Auth' },
        { value: 'apiKey', label: 'API Key' }
      ]"
      outer-class="!mb-0"
    />

    <div v-if="auth.type === 'bearer'" class="space-y-3">
      <FormKit
        type="text"
        v-model="auth.bearer"
        placeholder="Token"
        label="Bearer Token"
      />
    </div>

    <div v-if="auth.type === 'basic'" class="space-y-3">
      <FormKit
        type="text"
        v-model="auth.basic.username"
        placeholder="Username"
        label="Username"
      />
      <FormKit
        type="password"
        v-model="auth.basic.password"
        placeholder="Password"
        label="Password"
      />
    </div>

    <div v-if="auth.type === 'apiKey'" class="space-y-3">
      <FormKit
        type="text"
        v-model="auth.apiKey.key"
        placeholder="Key"
        label="Key"
      />
      <FormKit
        type="text"
        v-model="auth.apiKey.value"
        placeholder="Value"
        label="Value"
      />
      <FormKit
        type="select"
        v-model="auth.apiKey.addTo"
        :options="[
          { value: 'header', label: 'Header' },
          { value: 'query', label: 'Query Params' }
        ]"
        label="Add to"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  auth: {
    type: Object,
    required: true
  }
})
</script> 