<template>
  <div :class="divClasses">
    <ul :class="ulClasses">
      <li class="mr-2">
        <a href="#" aria-current="page"
           class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">Profile</a>
      </li>
      <li class="mr-2">
        <a href="#"
           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
      </li>
      <li class="mr-2">
        <a href="#"
           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
      </li>
      <li class="mr-2">
        <a href="#"
           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
      </li>
      <li>
        <a class="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">Disabled</a>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { useTabsClasses } from './useTabsClasses'
import type { PropType } from 'vue'

export type TabsVariant = 'default' | 'underline' | 'pills'

const props = defineProps({
  variant: {
    type: String as PropType<TabsVariant>,
    default: 'default',
  },
})

const { ulClasses, divClasses } = useTabsClasses(props)
</script>