<template>
  <div>
    <h1 class="text-3xl font-bold text-gray-900 mb-6">Settings</h1>
    
    <UTabs :items="tabs" v-model="activeTab">
      <template #account>
        <UCard class="mt-4">
          <div class="space-y-4">
            <h3 class="text-lg font-semibold">Account Settings</h3>
            <p class="text-gray-600">Account management will be implemented in future updates.</p>
          </div>
        </UCard>
      </template>

      <template #tags>
        <div class="mt-4">
          <TagsTagManager />
        </div>
      </template>

      <template #about>
        <UCard class="mt-4">
          <div class="space-y-4">
            <h3 class="text-lg font-semibold">About Pantry</h3>
            <p class="text-gray-600">Version 0.1.0 (MVP)</p>
            <p class="text-gray-600">Self-hosted pantry management app with barcode scanning.</p>
            <UButton 
              to="https://github.com/pantry-app/pantry"
              target="_blank"
              color="gray"
              variant="soft"
            >
              View on GitHub
            </UButton>
          </div>
        </UCard>
      </template>
    </UTabs>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

const activeTab = ref('tags')

const tabs = [
  {
    key: 'tags',
    label: 'Tags',
    icon: 'i-heroicons-tag'
  },
  {
    key: 'account',
    label: 'Account',
    icon: 'i-heroicons-user'
  },
  {
    key: 'about',
    label: 'About',
    icon: 'i-heroicons-information-circle'
  }
]
</script>
