<!-- Tabs component wrapper -->
<script setup lang="ts">
import { ElTabs, ElTabPane } from 'element-plus';
import { TabType } from '~src/admin/types';
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';

// Props
const { tabs } = defineProps<{
    tabs: TabType[];
}>();

// Change tab position based on breakpoint
const breakpoints = useBreakpoints(breakpointsTailwind);
const isMobile = breakpoints.smaller('md');
</script>

<template>
    <ElTabs class="tabs" :tab-position="isMobile ? 'top' : 'left'">
        <!-- Single tab -->
        <ElTabPane v-for="(tab, i) in tabs" :key="i" :label="tab.label">
            <component :is="tab.content"></component>
        </ElTabPane>
        <!-- Single tab -->
    </ElTabs>
</template>

<style lang="scss">
.el-tabs.tabs {
    --el-color-primary: theme('colors.primary-500');
    --el-text-color-primary: theme('colors.base-500');

    .el-tabs__header {
        @apply mr-0 md:mr-[70px];

        .el-tabs__nav-wrap {
            &::after {
                @apply left-0 right-auto;
            }

            .el-tabs__active-bar {
                @apply left-0 right-auto;
            }

            .el-tabs__item {
                @apply font-medium text-left justify-start;
            }
        }
    }
}
</style>
