<template>
    <div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
        <h1
            v-for="tab in tabs"
            :key="tab.key"
            class="font-bold text-3xl uppercase px-12 cursor-pointer"
            :class="[
                modelValue === tab.key
                    ? 'border-b-[6px] border-primary-500 text-primary-500'
                    : 'text-primary-500/50',
                tab.error ? '!text-red-500 !border-red-500' : ''
            ]"
            @click="emit('update:modelValue', tab.key)"
        >
            {{ tab.label }}
        </h1>
    </div>
</template>

<script setup lang="ts" generic="T extends string">
export interface UiTab<K extends string = string> {
    key: K
    label: string
    error?: boolean
}

defineProps<{
    modelValue: T
    tabs: UiTab<T>[]
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: T): void
}>()
</script>
