<script setup lang="ts">
import { ref } from 'vue';
import { useDisplay } from 'vuetify';

export interface TabItem {
  value: string;
  label: string;
}

defineProps<{
  items: TabItem[];
  tabColor?: string;
}>();

const display = useDisplay();
const tab = ref('1');
</script>

<template>
  <!-- Desktop: Tabs mit einzelner Anzeige -->
  <template v-if="!display.mobile.value">
    <v-tabs :color="tabColor ?? '#b62b2b'" v-model="tab">
      <v-tab v-for="item in items" :key="item.value" :value="item.value">
        {{ item.label }}
      </v-tab>
    </v-tabs>

    <v-divider></v-divider>

    <v-tabs-window v-model="tab">
      <v-tabs-window-item v-for="item in items" :key="item.value" :value="item.value">
        <slot :name="item.value"></slot>
      </v-tabs-window-item>
    </v-tabs-window>
  </template>

  <!-- Mobile: Alle Einträge untereinander -->
  <template v-else>
    <template v-for="item in items" :key="item.value">
      <slot :name="item.value"></slot>
    </template>
  </template>
</template>
