<!-- CreateNamespaceMethodSelector.vue -->
<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>Create Namespace</h3>
        <button class="close-button" @click="closeModal">×</button>
      </div>

      <div class="modal-body">
        <div class="method-option" @click="selectedMethod = 'guided'">
          <div class="radio-container">
            <div class="radio-button">
              <div class="radio-outer">
                <div class="radio-inner" v-if="selectedMethod === 'guided'"></div>
              </div>
            </div>
            <div class="method-text">
              <div class="method-label">Guided Creation</div>
            </div>
          </div>
        </div>

        <div class="method-option" @click="selectedMethod = 'yaml'">
          <div class="radio-container">
            <div class="radio-button">
              <div class="radio-outer">
                <div class="radio-inner" v-if="selectedMethod === 'yaml'"></div>
              </div>
            </div>
            <div class="method-text">
              <div class="method-label">YAML Creation</div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="cancel-button" @click="closeModal">
          Cancel
        </button>
        <button 
          class="continue-button" 
          @click="continueToSelected"
          :disabled="!selectedMethod"
        >
          Continue
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'CreateNamespaceMethodSelector',

  props: {
    show: {
      type: Boolean,
      default: false
    }
  },

  emits: ['close', 'method-selected'],

  setup(props, { emit }) {
    // State
    const selectedMethod = ref('guided');

    // Methods
    const closeModal = () => {
      emit('close');
    };

    const continueToSelected = () => {
      emit('method-selected', selectedMethod.value);
    };

    return {
      selectedMethod,
      closeModal,
      continueToSelected
    };
  }
});
</script>

<style src="@/assets/css/CreatePodMethodSelector.css" scoped></style>