<template>
  <div class="simple-tabs">
    <button
      v-for="tab in tabs"
      :key="tab.value"
      :class="['simple-tab', { active: internalValue === tab.value }]"
      @click="selectTab(tab.value)"
    >
      <slot name="label" :tab="tab">
        {{ $t(tab.label) }}
      </slot>
    </button>
  </div>
</template>

<script>
export default {
  name: 'SimpleTabs',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    modelValue: {
      type: [String, Number],
      required: true,
    },
  },
  computed: {
    internalValue() {
      return this.modelValue;
    }
  },
  methods: {
    selectTab(value) {
      // 1) v-model aktualisieren
      this.$emit('update:modelValue', value);
      // 2) zusätzliches change-Event
      this.$emit('change', value);
    }
  }
};
</script>

<style scoped>
.simple-tabs {
  display: flex;
  margin-top: 1rem;
}

.simple-tab {
  padding: 0.5rem 1rem;
  background: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.simple-tab.active {
  background: #F9A22C;
  color: #000;
}
</style>
