<template>
  <div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Settings</h1>

    <!-- DaisyUI Boxed Tabs -->
    <div role="tablist" class="tabs tabs-boxed mb-6">
      <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'logo' }" @click="activeTab = 'logo'">Logo</a>
      <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'company' }" @click="activeTab = 'company'">Company</a>
      <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'visibility' }" @click="activeTab = 'visibility'">Visibility</a>
      <a role="tab" class="tab" :class="{ 'tab-active': activeTab === 'theme' }" @click="activeTab = 'theme'">Theme</a>
    </div>

    <!-- Tab Content -->
    <div class="card bg-base-100 shadow-sm">
      <div class="card-body">
        <SettingsLogo v-if="activeTab === 'logo'" />
        <SettingsCompany v-if="activeTab === 'company'" />
        <SettingsVisibility v-if="activeTab === 'visibility'" />
        <SettingsTheme v-if="activeTab === 'theme'" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SettingsLogo from './SettingsLogo.vue'
import SettingsCompany from './SettingsCompany.vue'
import SettingsVisibility from './SettingsVisibility.vue'
import SettingsTheme from './SettingsTheme.vue'

const activeTab = ref('logo')
</script>
